html - 如何将 HTML 表格宽度限制为屏幕宽度的 95%？

Question

如何将 HTML 表格宽度限制为屏幕宽度的 95%？

我正在使用

<style type="text/css">
table {
  max-width:95%;
  border-collapse:collapse;
  ...
}
...

但生成的 HTML 页面的表格比屏幕宽度（1440x900 屏幕）更宽，并且页面底部出现滚动条。

Answer 1

使用样式

width: 95%;

反而。另外，根据您的意图，考虑风格

width: 100%;
margin-left: 10px;
margin-right: 10px;

为了更好的布局。我只是在这里猜测，但将桌子和窗边之间的距离设为固定距离似乎是个好主意。否则，当您调整大小时，边距将动态更改。

Answer 2

max-width 不能应用于表格标签。改用宽度。

<table>
<tr>
    <td>test</td>
</tr>
</table>​

table {
  width:95%;
  border-collapse:collapse;
}

td {background:red;}

http://jsfiddle.net/2wH8S/

有一些解决方法可以应用最大宽度效果，在“css table max-width”上做一个谷歌。

Answer 3

添加到 Konrad Viltersten，我会将宽度设置为 95%，但不是使用 10 像素左右的边距，而是使用：

margin-left: 2.5%;
margin-right: 2.5%;

这应该可以消除调整浏览器窗口大小时的任何定位问题。