分享一个固定表头的CSS样式写法，主要实现效果为，表头不动，内容滚动

最新推荐文章于 2025-06-11 02:52:33 发布

原创最新推荐文章于 2025-06-11 02:52:33 发布 · 置顶 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS实现表格固定表头，而内容区域可滚动的样式写法，帮助开发者创建更易用的数据展示界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
    <meta
 charset="utf-8">
    <title>Table</title>
    <style
 type="text/css">
        .table{
            width:
100%;
            border-collapse:collapse;
            border-spacing:0;
        }
        .fixedThead{
            display:
block;
            width:
100%;
        }
        .scrollTbody{
            display:
block;
            height:
262px;
            overflow:
auto;
            width:
100%;
        }
        .table
 td,.table th {
            width:
200px;
            border-bottom:
none;
            border-left:
none;
            border-right:
1px

solid 
#CCC;
            border-top:
1px

solid 
#DDD;
            padding:
2px

3px 
3px 
4px
        }
        .table
 tr{
            border-left:
1px

solid 
#EB8;
            border-bottom:
1px

solid 
#B74;
        }
        thead.fixedThead
 tr th:last-child {
            color:#FF0000;
            width:
218px;
        }
    </style>
</head>
<body
 >
    <table
 class="table">
        <thead
 class="fixedThead">
            <tr><th>大家一起嗨</th><th>加油</th></tr>
        </thead>
        <tbody
 class="scrollTbody">
            <tr><td>fuck
1455</td><td>一起来</td></tr>
          

 <tr><td>fuck
1455</td><td>一起来</td></tr>

 
<tr><td>fuck
1455</td><td>一起来</td></tr>

 <tr><td>fuck
1455</td><td>一起来</td></tr>

 <tr><td>fuck
1455</td><td>一起来</td></tr>

<tr><td>fuck
1455</td><td>一起来</td></tr>

        </tbody>
    </table>
</body>
</html>