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宽度。

我想看到我的桌子，但是：

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;
}

除非将表的显示设置为阻塞，否则无法设置表的高度。

https://jsfiddle.net/yxfsj4c6/

带有滚动和自动尺寸列的表格

1 个答案: