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

【问题标题】：How to limit HTML table width to 95% of the screen width?如何将 HTML 表格宽度限制为屏幕宽度的 95%？
【发布时间】：2012-07-16 19:56:36
【问题描述】：

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

我正在使用

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

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

【问题讨论】：

【解决方案1】：

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

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

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

td {background:red;}

有一些变通方法可以应用最大宽度效果，请在“css table max-width”上搜索一下。

【讨论】：

链接：stackoverflow.com/questions/7028096/…
我正在使用 Chrome31 并检查您的表格，这不会限制上方的表格大小 - jsfiddle.net/ubershmekel/2wH8S/5 - 请注意您可以横向滚动。
无论您如何尝试限制 td 宽度，即使使用 px，也会发生这种情况。你的测试数据不切实际。如果有这样的数据，必须显示，然后选择一个不同的元素，如 DIV 是更好的解决方案。

【解决方案2】：

使用样式

width: 95%;

相反。另外，根据您的意图，考虑样式

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

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

【讨论】：

试过这个还是不行，这意味着表格仍然比屏幕更宽，并且底部出现了一个滚动条。这是否取决于单元格内容的清洁度？
打开一个新项目并放入一个表格。还是太宽了？如果是这样，你有一些问题。最有可能的是，它会正确显示。然后，通过一次添加每个组件（或几个，这样您就不会发疯），您可以跟踪错误发生的位置。或者，您可以复制您的项目并将其剥离，直到错误消失。当你找到确凿证据后，请与我们联系。我的猜测是，一种风格会在不知不觉中被继承。（我总是在 CSS'ing 时做出这样的猜测）。
这似乎是由样式为tr td div.longcell { height:190px; overflow-y:scroll; } 的单元格的存在引起的。但我不知道如何修复它。当<td><div class="tallcell">和</div></td>的内容行太宽时，就会出现上述问题。
你需要在那里“滚动”吗？ “隐藏”就足够了吗？ More info on overflow-y click here
hidden 是行不通的。查看者需要查看单元格的内容。他们可以向下滚动查看默认情况下未显示的任何内容。

【解决方案3】：

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

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

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

【讨论】：