HTML表格体滚动

原创已于 2023-08-22 14:26:46 修改 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3

于 2023-08-22 14:22:02 首次发布

css 专栏收录该内容

4 篇文章

订阅专栏

博客主要围绕原生表格元素展开，指出添加scroll属性不会生效，需改变表格属性。使用后表格体会出现侧边滚动条，但表头固定可能导致上下不对齐。还提到使用table-layout: fixed确定列宽，单元格内容超长时设置宽度会有出入，可让最后一列自适应保证其他元素宽度。

原生的表格元素添加scroll并不会生效，需要改变表格的属性


    <style>
        table,tbody {
            display: block;
            height: 100px;
        }
        tbody {
            overflow-y: scroll;
        }
        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
    </style>
</head>

使用后表格体会出现侧边的滚动条，但是表格头固定，可能会出现上下并不对齐的现象。
使用table-layout：fixed后。整个每一列的宽度由列所在表头确定，可以给表头th元素设置width，但是当单元格内内容超长时，设置的宽度就会有出入。可以给表格最后一列不设置宽度，自适应从而保证其他元素宽度足够不变。