您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

表固定页眉和可滚动主体

表固定页眉和可滚动主体

这是有效的解决方案:

table {

    width: 100%;

}



thead, tbody, tr, td, th { display: block; }



tr:after {

    content: ' ';

    display: block;

    visibility: hidden;

    clear: both;

}



thead th {

    height: 30px;



    /*text-align: left;*/

}



tbody {

    height: 120px;

    overflow-y: auto;

}



thead {

    /* fallback */

}





tbody td, thead th {

    width: 19.2%;

    float: left;

}


<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>



<table class="table table-striped">

    <thead>

        <tr>

            <th>Make</th>

            <th>Model</th>

            <th>Color</th>

            <th>Year</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td class="filterable-cell">Ford</td>

            <td class="filterable-cell">Escort</td>

            <td class="filterable-cell">Blue</td>

            <td class="filterable-cell">2000</td>

        </tr>

        <tr>

            <td class="filterable-cell">Ford</td>

            <td class="filterable-cell">Escort</td>

            <td class="filterable-cell">Blue</td>

            <td class="filterable-cell">2000</td>

        </tr>

        <tr>

            <td class="filterable-cell">Ford</td>

            <td class="filterable-cell">Escort</td>

            <td class="filterable-cell">Blue</td>

            <td class="filterable-cell">2000</td>

        </tr>

        <tr>

            <td class="filterable-cell">Ford</td>

            <td class="filterable-cell">Escort</td>

            <td class="filterable-cell">Blue</td>

            <td class="filterable-cell">2000</td>

        </tr>

    </tbody>

</table>
其他 2022/1/1 18:19:13 有467人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶