正文
CSS打造固定表头
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/test.css">
<title>表头固定内容滚动</title>
</head>
<body>
<div class="tableWrap" style="margin:20px;">
<label>可滚动表格——表格宽度自动每列宽度设置<col></label>
<table class="table-thead">
<colgroup>
<col width="">
<col width="">
<col width="">
<col width="">
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>账户名称</th>
<th>账户编号</th>
<th></th>
</tr>
</thead>
</table>
<div class="comTbody">
<table class="table-tbody" style="border-top: 0;">
<colgroup>
<col width="">
<col width="">
<col width="">
</colgroup>
<tbody>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
<tr>
<td></td>
<td>中国电信</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div><label>可滚动表格——表格宽度100%，列宽度设置<col></label>
<div class="table-wrap">
<div class="table-head">
<div class="table-head-wrap">
<table class="grid">
<colgroup>
<col style="width:80px">
<col>
<col>
<col style="width:150px">
</colgroup>
<thead>
<tr>
<th>
<span class="tab-link">序号</span>
</th>
<th>
<span class="tab-link">姓名</span>
</th>
<th>
<span class="tab-link">年龄</span>
</th>
<th>
<span class="tab-link">地址</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="table-content">
<table class="grid">
<colgroup>
<col style="width:80px">
<col>
<col>
<col style="width:150px">
</colgroup>
<tbody>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div>小明</div>
</td>
<td>
<div></div>
</td>
<td>
<div>上海</div>
</td>
</tr>
</tbody>
</table>
</div>
</div><label>可滚动表格——表格宽度自动，列宽度固定设置<col></label>
<div class="data-grid">
<div class="data-view">
<div class="grid-head">
<div class="grid-head-inner">
<table class="data-table">
<tbody>
<tr class="data-table-row">
<td>
<div class="datagrid-cell cell-c1">
<div>Item ID</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<div>Product</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<div>List Price</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<div>Unit Cost</div>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<div>Attribute</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid-body">
<table class="datagrid-btable">
<tbody>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="datagrid-cell cell-c1">
<span>EST-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c2">
<span>FI-SW-</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c3">
<span>36.5</span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c4">
<span></span>
</div>
</td>
<td>
<div class="datagrid-cell cell-c5">
<span>Large</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
CSS代码：
@charset "utf-8";
.tableWrap{
width:600px;
box-sizing: border-box;
}
.table-thead{
width:auto;
font-size: 14px;
background-color: #FFF;
border: 1px solid #CFCFCF;
border-collapse: collapse;
border-spacing: 0px;
}
.table-thead tr th{
text-align: left;
padding-left:10px;
border-right:1px solid #CFCFCF;
}
.table-thead tr th:last-child, .table-thead tr th:nth-last-child(){
border-right:;
}
.table-thead tr, .table-tbody tr{
height:35px;
}
.table-tbody{
width:auto;
font-size: 14px;
background-color: #FFF;
border-left:1px solid #CFCFCF;
border-collapse: collapse;
border-spacing: 0px;
}
.table-tbody tr{
border-bottom:1px solid #CFCFCF;
}
.table-tbody tr:last-child{
border-bottom: ;
}
.table-tbody tr td{
padding-left:10px;
padding-right:10px;
border-right:1px solid #CFCFCF;
}
.comTbody{
width:auto;
display: inline-block;
max-height:100px;
overflow-y: scroll;
border-bottom: 1px solid #CFCFCF;
}
.table-wrap{
width:550px;
outline: none;
position: relative;
font-size: 14px;
color:#;
border: 1px #e6e6e6 solid;
margin-bottom: 30px;
}
.table-head{
padding-right:17px;
background-color: #FAFAFA;
border-bottom: 1px #e6e6e6 solid;
}
.table-head-wrap{
width:%;
position: relative;
overflow: hidden;
}
.grid{
margin: 0px;
table-layout: fixed;
width: %;
max-width: none;
border-spacing: 0px;
empty-cells: show;
border-width: 0px;
outline: 0px none;
border-collapse: collapse;
}
.grid tr th{
padding: .929em .5em;
vertical-align: bottom;
overflow: hidden;
border-left: 1px #e6e6e6 solid;
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
.grid tr th:first-child{
border-left-width: ;
}
.grid tr td{
border-left: 1px #e6e6e6 solid;
border-bottom: 1px #e6e6e6 solid;
padding: .929em .5em;
overflow: hidden;
line-height: .6em;
vertical-align: middle;
text-overflow: ellipsis;
}
.grid tr td:first-child{
border-left-width: 0px;
}
.grid tr:last-child td{
border-bottom: none;
}
.tab-link{
display: block;
min-height: 18px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
}
.table-content{
height:221px;
white-space: normal;
position: relative;
width: %;
overflow-x: auto;
overflow-y: scroll;
min-height: ;
}.data-grid{
width: 698px;
height: 201px;
position: relative;
overflow: hidden;
font-size: 14px;
color:#;
box-sizing: border-box;
border-color: #95B8E7;
border-width: 1px;
border-style: solid;
}
.data-view{
width: 698px;
position: absolute;
overflow: hidden;
top: 0px;
right: 0px;
}
.grid-head{
width: 698px;
height: 30px;
border-color: #DDD;
overflow: hidden;
cursor: default;
border-width: 0px 0px 1px;
border-style: solid;
background-color:#efefef;
}
.grid-head-inner{
display: block;
float: left;
}
.data-table{
height: 30px;
border-collapse: separate;
}
.data-table-row{
height: 30px;
}
.data-table td{
border-color: #CCC;
border-width: 0px 1px 1px 0px;
border-style: dotted;
margin: 0px;
padding: 0px;
line-height: .65em;
}
.datagrid-cell{
margin: 0px;
padding: 0px 4px;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
height: 18px;
line-height: 18px;
font-size: 12px;
}
.cell-c1{
width:79px;
height:auto;
}
.cell-c2{
width:99px;
height:auto;
}
.cell-c3{
width:85px;
height:auto;
text-align: right;
}
.cell-c4{
width:100px;
height:auto;
text-align: right;
}
.cell-c5{
width:200px;
height:auto;
}
.grid-body{
width: 698px;
height: 168px;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.datagrid-btable{
border-collapse: separate;
}
.datagrid-btable tr{
height:25px;
}
.datagrid-btable tr td{
border-color: #CCC;
border-width: 0px 1px 1px 0px;
border-style: dotted;
margin: 0px;
padding: 0px;
}
