美文网首页WEB学习记录
CSS题目系列(1) - 可滚动的Table

CSS题目系列(1) - 可滚动的Table

作者: 4Ark | 来源:发表于2019-01-11 18:16 被阅读11次

    描述

    在开发中,有这样一个需求,Table的表头不动,表身可以滚动,效果请点击以下链接查看:

    https://gd4ark.github.io/blog_demos/2018-11-25/01.html

    正文

    假设我们有一个这样结构的表格:

    <table>
        <thead>
            <tr>
                <th>Position</th>
                <th>Name</th>
                <th>Score</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody>
            <!-- 这里为了方便展示 只显示一行 -->
            <tr>
                <td>0</td>
                <td>张三</td>
                <td>15</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>
    

    设置表身样式:

    table tbody {
        display: block;
        height: 200px;            
        overflow-y: auto;
    }
    

    这时候,表身已经实现了滚动,但是有个问题,td缩在了一堆,如下:

    image

    加上这个就好了:

    table thead,
    tbody tr {
        display: table;
        table-layout: fixed; /* 使用表格固定算法 必须配合上面一起使用 */
        width: 100%;
    }
    
    image

    完整代码:https://github.com/gd4Ark/blog_demos/blob/master/2018-11-25/01.html

    后记

    刚刚开始写文章,很多地方写的不够好,望谅解,我会慢慢改进的。

    注:此文为原创文章,如需转载,请注明出处。

    相关文章

      网友评论

        本文标题:CSS题目系列(1) - 可滚动的Table

        本文链接:https://www.haomeiwen.com/subject/zwuulqtx.html