纯CSS实现的表格滚动条效果

最新推荐文章于 2025-06-30 14:41:02 发布

Inuyasha1121

最新推荐文章于 2025-06-30 14:41:02 发布

阅读量1.4w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： css 滚动条文章标签：表格滚动条

本文链接：https://blog.youkuaiyun.com/Inuyasha1121/article/details/50576235

css 同时被 2 个专栏收录

37 篇文章

订阅专栏

滚动条

3 篇文章

订阅专栏

本文介绍了一种仅使用CSS实现的表格滚动效果，表头固定不动，表格主体部分可以滚动。通过设置thead和tbody的不同display属性及高度，使得表头保持在顶部，而表格主体内容则可以根据需要进行滚动。

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

纯CSS实现的表格滚动条效果，表格头不滚动，表格体滚动，一下只列出达到效果的最基本内容，没有样式的修饰

html:

<table>
<thead>
   <tr>
       <th><a href="#">Header 1</a></th>
       <th><a href="#">Header 2</a></th>
       <th><a href="#">Header 3</a></th>
   </tr>
</thead>
<tbody>
   <tr>
       <td>Cell Content 1</td>
       <td>Cell Content 2</td>
       <td>Cell Content 3</td>
   </tr>
   <tr>
       <td>More Cell Content 1</td>
       <td>More Cell Content 2</td>
       <td>More Cell Content 3</td>
   </tr>
   <tr>
       <td>Even More Cell Content 1</td>
       <td>Even More Cell Content 2</td>
       <td>Even More Cell Content 3</td>
   </tr>
   <tr>
       <td>And Repeat 1</td>
       <td>And Repeat 2</td>
       <td>And Repeat 3</td>
   </tr>
   <tr>
       <td>Cell Content 1</td>
       <td>Cell Content 2</td>
       <td>Cell Content 3</td>
   </tr>

……

</tbody>
</table>

css：

table {
   width: 756px;
}

thead tr {
   display: block;
}

tbody {
   display: block;
   height: 100px;
   overflow: auto;
}

thead th {
   width: 200px;
}

thead th + th {
   width: 240px;
}

thead th + th + th {
   width: 316px;
}

tbody td {
   width: 200px;
}

tbody td + td {
   width: 240px;
}

tbody td + td + td {
   width: 300px;
}