Html 如何使用溢出滚动设置 tbody 高度

发布于06月02日

我在设置车身高度、宽度、溢出卷轴时遇到问题.

<style> 
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>

Visit my fiddle here个

我想要像表格A一样的表格B，带有溢出卷轴.

如有任何帮助，我们将不胜感激.

非常感谢，

推荐答案

如果希望tbody显示滚动条，请将其设置为display: block;.

将tr设置为display: table;，以便它保持表的行为.

要使细胞均匀分布，请使用table-layout: fixed;.

DEMO tbody scroll

CSS:

table, tr td {
    border: 1px solid red
}
tbody {
    display: block;
    height: 50px;
    overflow: auto;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width: 400px;
}

如果tbody因为内容少于height或max-height而没有显示滚动，请随时使用:overflow-y: scroll;设置滚动.100

100 2019-04/2021

Important note:这种使表格可滚动的方法在某些情况下有缺点.(见下面的 comments )

警告:此解决方案会断开THAD和tbody单元网格的连接；这意味着在大多数实际情况下，您将无法从表中获得预期的单元格对齐方式.注意，这个解决方案使用了一个hack来保持它们的对齐:thead{width:calc(100%-1em)}

无论如何，要设置滚动条，需要重置显示以消除表格布局(它永远不会显示滚动条).
通过display:grid/contents将<table>变成网格也会在标题和可滚动部分之间留下一个空隙，这一点值得注意.(如果从div构建，则相同)
overflow:overlay;还没有出现在Firefox ( keep watching it)中
position:sticky将需要一个可以是滚动容器的父容器.如果您有几行和rowspan/colspan个标题，请确保您的thead可以是粘性的(它不带 chromium ).