css实现多表头table+tbody滚动

最新推荐文章于 2024-05-30 11:05:59 发布

YFLoveo

最新推荐文章于 2024-05-30 11:05:59 发布

阅读量931

点赞数

本文链接：https://blog.youkuaiyun.com/YFLoveo/article/details/88179445

版权

table{

width: 300px;

table-layout: fixed;

}

#tbody{

display: block;

height: 100px;

overflow-y: auto;

width: 300px;

}

#tbody tr{

display: table;

width: 100%;

table-layout: fixed;

}

<table border="1">

<thead>

    <tr>

        <th colspan="2">Month</th>

        <th colspan="2">Savings</th>

    </tr>

    <tr>

        <th>Month</th>

        <th>Savings</th>

        <th>Month</th>

        <th>Savings</th>

    </tr>

</thead>

<tbody id="tbody" >
    <tr>
        <td>January</td>
        <td>$100</td>    
        <td>January</td>
        <td>$100</td>
    </tr>

    <tr>
        <td>January</td>
        <td>$100</td>
        <td>January</td>
        <td>$100</td>
    </tr>

</tbody>

<tfoot>
    <tr>
        <td>Sum</td>
        <td>$180</td>
        <td>Sum</td>
        <td>$180</td>
    </tr>
</tfoot>
</table>