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

Question

我在设置 tbody 高度宽度溢出滚动时遇到问题。

<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

我希望表 B 像表 A 一样带有溢出滚动条。

我们将不胜感激。

非常感谢，

Answer 1

如果你想要tbody要显示滚动条，请设置其 display: block; .

设置display: table;对于 tr以便它保持表的行为。

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

DEMO

---

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; . <强> DEMO 2

---

<editS/updateS> 2019 - 04/2021

---

• 重要说明:这种使表格可滚动的方法在某些情况下有缺点。 (请参阅下面的评论。)顺便说一句，该线程中的一些重复答案值得同样的警告

WARNING: this solution disconnects the thead and tbody cell grids; which means that in most practical cases, you will not have the cell alignment you expect from tables. Notice this solution uses a hack to keep them sort-of aligned: thead { width: calc( 100% - 1em ) }

• 无论如何，要设置滚动条，需要重置显示以摆脱表格布局(永远不会显示滚动条)。

• 转动 <table>通过 display:grid 进入网格/contents还会在页眉和可滚动部分之间留下间隙，请注意。 (同上，如果是从 div 构建的)

• overflow:overlay;还没有在 Firefox 中出现(继续关注)

• position:sticky将需要一个可以滚动的父容器。确保你的 thead如果你有几行和 rowspan/colspan 可能会很粘其中的 header (它不适用于 chrome)。

到目前为止，还没有完全通过CSS实现的完美解决方案。有几种平均方式可供选择，因此它适合您自己的表格(表格布局:固定；是..固定表格和列的宽度，但 javascript 可能用于重置这些值 => 退出纯 CSS)