时间戳

首页 > 解决方案 > 具有滚动和自动大小列的表格

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

问题描述

我有一个这样的表，带有覆盖滚动（仅适用于 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/

...但滚动工作与上表一样

有什么建议吗？

标签： htmlcssoverlay

解决方案

这是我的解决方案：

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/

推荐阅读