html - 带有滚动和自动大小列的表格

Question

我有一个像这样的带有覆盖滚动条的表格(仅适用于 Chrome):

https://jsfiddle.net/pmiranda/t0pmjny6/2/

重要的CSS是:

table.scroll {
    width: 100%;
    display: table;
}

table.scroll tbody {
    display:block;
    max-height:180px;
    overflow-y:overlay;
}

table.scroll thead, table.scroll tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

overlay 类仅适用于 Chrome 和 FF，我知道，没关系。该表的问题是如果某些文本太长，它会溢出 th 或 td 宽度。

我希望看到这样的 table ，但是:

https://jsfiddle.net/pmiranda/29z5hn06/2/

...但是滚动像上表一样工作

有什么建议吗？

Answer 1

这是我的解决方案:

table.scroll {
    display: inline-block;
    table-layout:auto;
    max-height:180px;
    overflow-y:overlay;
    width: auto;
}

table.scroll thead, table.scroll tbody tr {
    width:100%;
}

th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

除非将其显示设置为 block ，否则无法设置表格的高度。

https://jsfiddle.net/yxfsj4c6/