如何让表格填满整个屏幕？

Question

当我使用内联 CSS 将表格宽度设置为 100% 时，它会填满整个页面，但是当我尝试在 style.css 文件中的媒体查询中将表格宽度设置为 100% 时，它不会填充页。 我正在宽度小于 600 像素的手机上测试该网站。

在线工作。 <table style="width: 100%">

不适用于 style.css 文件。 @media only screen and (max-width: 600px) {table {width: 100%;}}

我怎样才能让它在 style.css 文件中工作？

Answer 1

您可以通过在桌子上设置 css 来实现： table{min-width:100%}

看一下这个：

https://jsfiddle.net/sa0Ldbe1/

Answer 2

@media only screen and (max-width: 600px) {table {width: 100%;}}

仅适用于宽度小于 600 像素的设备。

<table style="width: 100%">

适用于任何设备尺寸。 确保您使用的设备小于 600 像素。

如果您需要它在大于 600px 宽的设备上工作，请使用table {width: 100%;}或@media only screen and (min-width: 600px) {table {width: 100%;}}

Answer 3

晚安 xman，避免将 CSS 内联。 最好将 styles 放在 CSS 文件中。

看：

 table { width: 50%; } td, th { border: 1px solid black; text-align: left; } @media (max-width: 600px){ table { width: 100%; } }

 <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>

As long as the width was in the tag, your media querie would never work, because in CSS Specificity Hierarchy, inline styles will always be above the styles you put in your style.css.

更多关于： CSS 特异性层次结构