Css 设置固定表格头部，内容可滚动

 

效果图：

实现这个效果主要用到了<colgroup>标签，来保证表格头部和内容的宽度一致。将头部<thead> 和<tbody>,分别放☞到两个div的<table>标签下。并给表格内容所在的div

设置一个固定高度即可。
样式  calc(100% - 1em) 来给滚动条预留1em的宽度。

 

<colgroup>标签的属性定义：

属性	值	描述
span	数值	规定列组应该横跨的列数
width	像素大小 、占比%	规定列组合的宽度
align	left right center justify ..	规定列组合的垂直对齐方式

 

• 表格css样式

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<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;     }<br>    /* 若去掉下面部分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代码

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<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>