Css 设置固定表格头部,内容可滚动
效果图:
实现这个效果主要用到了<colgroup>标签,来保证表格头部和内容的宽度一致。将头部<thead> 和<tbody>,分别放☞到两个div的<table>标签下。并给表格内容所在的div
设置一个固定高度即可。
样式 calc(100% - 1em) 来给滚动条预留1em的宽度。
样式 calc(100% - 1em) 来给滚动条预留1em的宽度。
<colgroup>标签的属性定义:
属性
|
值
|
描述
|
span
|
数值
|
规定列组应该横跨的列数
|
width
|
像素大小 、占比% |
规定列组合的宽度
|
align
|
left
right
center
justify
..
|
规定列组合的垂直对齐方式
|
-
表格css样式
<style> .main { margin:30px auto; width: 1000px; height: auto; font-size: 13px; font-family: serif; overflow: hidden; } table { border-spacing: 0; border-collapse: collapse } table th { background-color: #F4F5F7; } table, table td, table th { border: 1px solid #d3d7dc; } table td, table th { padding: 7px; height: 26px; line-height: 26px; } .thead_table { width: calc(100% - 1em); } .div_tbody { height: 600px; overflow: auto; } .table_tbody { width: 100%; } /*设置滚动条*/ .div_tbody::-webkit-scrollbar { width: 1em; }
/* 若去掉下面部分css,将保留滚动效果,而滚动条不会显示 */ .div_tbody::-webkit-scrollbar-track { background-color: rgba(217, 210, 210, 0.41); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } .div_tbody::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.43); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } </style>
-
表格html代码
<div class="main"> <div> <table cellpadding="0" cellspacing="0" class="thead_table"> <colgroup> <col span="5" width="20%" /> </colgroup> <thead> <tr> <th>序号</th> <th>名称</th> <th>性别</th> <th>年龄</th> <th>爱好</th> </tr> </thead> </table> </div> <div class="div_tbody"> <table cellpadding="0" cellspacing="0" class="table_tbody"> <colgroup> <col span="5" width="20%" /> </colgroup> <tbody> @for (var i = 0; i < 20; i++) { <tr> <td>@i</td> <td>第 @i 梦</td> <td>@(i / 2 == 1 ? "女" : "男")</td> <td>@(i / 2 == 0 ? 18 : 19)</td> <td>无</td> </tr> } </tbody> </table> </div> </div>