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

小编典典

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

all

我在设置 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>

在这里访问我的小提琴

我想要表 B 和表 A 一样带有溢出滚动。

任何帮助将不胜感激。

非常感谢，M。

阅读 109

2022-07-29

共1个答案

小编典典

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

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

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

演示正文卷轴

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不显示滚动，因为内容小于heightor max-height，请随时设置滚动：overflow-y: scroll;。
演示 2

<editS/updateS>2019 - 04/2021

重要提示： 这种使表格可滚动的方法在某些情况下存在缺陷。（请参阅下面的评论。） 顺便说一下，这个线程中的一些重复答案值得同样的警告

警告：此解决方案断开了 thead 和 tbody
单元格网格；这意味着在大多数实际情况下，您不会有您期望的表格中的单元格对齐方式。请注意，此解决方案使用 hack 使它们保持对齐：thead {
width: calc( 100% - 1em ) }

无论如何，要设置滚动条，需要重置显示以摆脱表格布局（永远不会显示滚动条）。
通过/将其<table>变成网格也会在标题和可滚动部分之间留下空隙，请注意。（如果从 div 构建，则同上）display:grid``contents
overflow:overlay;尚未出现在 Firefox 中 （继续观看）
position:sticky将需要一个父容器，它可以是滚动容器。如果您有几行和标题，请确保您thead可以保持粘性rowspan/colspan（它没有 chrome）。

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

2022-07-29