纯CSS实现固定table表格表头滚动

最新推荐文章于 2021-09-16 13:29:34 发布

吃瓜阿尼亚

最新推荐文章于 2021-09-16 13:29:34 发布

阅读量371

点赞数 1

分类专栏：前端文章标签： CSS HTML

原文链接：http://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML

<h3>Table A</h3>
<table >
    <thead>
        <tr>
            <td>Name</td>
            <td>phone</td>a
        </tr>
    </thead>
    <tbody>
        <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>
<hr/>
<h3>Table B</h3>
<table >
    <thead>
        <tr>
            <td>Name</td>
            <td>phone</td>
        </tr>
    </thead>
    <tbody>
        <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>

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;
}
thead {
    width: calc( 100% - 1em )
}
table {
    width:400px;
}