css3 - 寬度設置的都是百分比，為什么還是不適配移動端？

問題描述

加了<meta name='viewport' content='width=device-width,initial-scale=1'>

<table class='features'> <tbody><tr> <th style='width: 15%;'>Features </th> <th style='width: 15%;'>Express<br>Windows VPS </th> <th style='width: 15%;'>Basic<br>Windows VPS </th> <th style='width: 15%;'>Professional<br>Windows VPS </th> <th style='width: 15%;'>Advanced<br>Windows VPS </th> <th>Remarks on Features </th></tr> </tbody></table>

.features { width: 80%; margin: 0 auto;}.features tbody{ width: 100%;}.features th{ background-color: #373d41; color: #fff; font-weight: 400;}@media screen and (max-width: 768px) { .features {width: 100%;margin: 0; }}

Pc上沒問題：

手機上就超出了：

表格上面那張圖片是設置為寬度100%的，而且底部出現了橫向的滾動條。要怎么才能讓表格全部出現在屏幕里，不要滾動條。

問題解答

table里的元素會被內容撐開，不能小于內容大小，所以設置的width會失效。給table加這個樣式table-layout:fixed;但是會出現一個問題，就是table里的文字重疊到一起了。或者你配合多媒體查詢再修改一下字體的尺寸吧?；蛘吲浜掀渌麡邮剑南聝炔课淖值娘@示格式。

<meta name='viewport' content='width=device-width, initial-scale=1'>

加視口 meta了么？

百分比只是相對父元素，vw才是你想的那種“相對寬度”。