問題描述

加了<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上沒問題：

手機(jī)上就超出了：

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

問題解答

table里的元素會(huì)被內(nèi)容撐開，不能小于內(nèi)容大小，所以設(shè)置的width會(huì)失效。給table加這個(gè)樣式table-layout:fixed;但是會(huì)出現(xiàn)一個(gè)問題，就是table里的文字重疊到一起了。或者你配合多媒體查詢?cè)傩薷囊幌伦煮w的尺寸吧。或者配合其他樣式，改下內(nèi)部文字的顯示格式。

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

加視口 meta了么？

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