如何使用 CSS 格式化表格：
表格在屏幕内，浏览器的水平滚动条不显示，用户无需水平滚动即可看到表格的右侧；
单元格根据需要使用尽可能多的宽度，包含仅包含“1”、“21”等数字的单元格的列将不会使用比显示所有数字所需的宽度大得多的宽度该列中的单元格，例如 4 个字符的宽度，即使用比这意味着浪费水平空间；
对于包含非常宽的单元格的列，或者更准确地说，如果允许将占据较大宽度的内容，请使用尽可能多的宽度，以便不违反 1) 和 2)，并且如果无法显示单元格，让该单元格显示水平滚动条。
这在 Windows 和 Mac OS X 上的最新 Firefox 和 Google chrome 的 CSS 中是否可行？
【问题讨论】：
标签： css formatting width scrollbar css-tables
我的first attempt 基于CSS: Constrain a table with long cell contents to page width?，使用嵌套divs 和position: relative 然后position: absolute。不考虑绝对定位的 div 的大小，这对表格的宽度有利，但对行的高度不利：它不会扩展到包含滚动条。
然后我 tried table-layout: fixed 按照How can I set a <td> width to visually truncate its displayed contents? 的建议。这也实现了忽略单元格内容大小的目标，但这样做会使我们无法像以前一样指定最后一列应该采用所有 leftover 宽度。
【讨论】：
col 元素的宽度；有更多的列，也许你可以在它们之间分割宽度：jsfiddle.net/v2Rvx/3
<colgroup><col/><col/><col class="wide"/><col class="wide"/></colgroup>中的列指定宽度百分比/分数吗？
<col style="width: 50%"> 或<col width="50%">。
这些提示可能会有所帮助：
1- 不要为单元格指定任何宽度 2-当您自动插入页面时，会创建一个样式并分配给它，上面写着： 宽度：100%；
继续删除它。这样你的表格就会变得非常小，并能适应单元格的内容。
3- 使用单元格的 nowrap 属性为您希望保留在一行中的字段（如数字），但不要为较大的文本设置它并允许它是多行的。
4- 您可能想要为表格设置宽度或将表格放在面板中并为面板设置宽度。
我不确定如何仅显示一行的滚动条，但我认为如果您将它们显示在多行中，则不需要该选项。
【讨论】：