主题：【原创】css 控制 table全屏宽，长则滚动，短则自扩 -- 铁手

表格化的数据在网页中显示有两个问题比较常见。一是如果列比较少，内容比较短，则整个表格会挤缩在一起，留白太多。再就是如果列比较多，那么整个表格在既定空间里放不下，最好是能够提供滚动，这样，表格里的内容在不会挤成一个个竖条。

经过一段时间琢磨和尝试，用以下 css 可以实现上面的需求，做个笔记记录分享。

table {
 display: block;
 overflow-x: auto;
 /* 和下面 tbody 配合来给表格提供滚动条*/
 width: 99%;
 margin: 0.5rem auto;
}
tbody {
 white-space: nowrap;
 /* 万一列太多，内容太多，还是一直延伸*/
}
table > tbody > tr > th,
table > tbody > tr > td {
 width: 1%;
 /* ！！！怪异。为让各列自动调整宽度
 必须设定第一行第一列宽度为小值 */
}

基本思路是：

table block 来定宽显示并居中，表格内内容多少无关。

table overflow 来给 tbody 超宽时提供滚动条。

为此，需要设定 tbody nowrap。

长内容时，出现滚动条，没问题。但是，短内容时，虽然 table 宽度如上所设定，但是 tbody 的宽度是各列相加，却达不到 table 的宽度，导致各列显得被挤压在一起。奇怪的是，如果设定第一列的宽度为很小的%值，则各列会平分总宽度，窄列拓宽，均匀分布到整个表格宽度。还奇怪的是，这个宽度值还不能用 px 来设定。