固定表头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定表头</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.table-container {
background: #fff;
height: 100%;
}
table {
width: 98%;
display: block;
height: 100%;
overflow: auto;
border: none;
border-spacing: 0;
border-collapse: collapse;
margin-left: 10px;
}
table caption {
text-align: center;
font-weight: bold;
font-size: 20px;
color: #000;
position: fixed;
width: 1401px;
background: #fff;
height: 65px;
line-height: 65px;
overflow: hidden;
z-index: 3;
}
table thead {
display: table;
table-layout: fixed;
position: fixed;
width: 1400px;
top: 65px;
background: #fff;
overflow: hidden;
z-index: 3;
overflow: hidden;
}
table tbody {
display: table;
table-layout: fixed;
width: 1400px;
position: relative;
top: 124px;
z-index: 1;
}
table th {
text-align: center;
font-weight: bold;
font-size: 14px;
color: #000;
border: 1px solid #333333;
}
table tr {
color: #000;
border-left: none;
border: 1px solid #333333;
}
table td {
text-align: center;
word-break: break-all;
}
</style>
</head>
<body>
<div class="table-container">
<table border="1" id="count-table" class="tb_table">
<caption id="table-title">XXX车辆编制情况统计表</caption>
<thead>
<tr>
<th rowspan="2">所属区域</th>
<th rowspan="2">dw名称</th>
<th>bz数</th>
<th>sy数</th>
<th>qb数</th>
<th colspan="3">车牌种类</th>
<th colspan="9">车辆种类</th>
<th colspan="3">使用年限</th>
<th colspan="2">行驶公里数</th>
</tr>
<tr>
<th>2021</th>
<th>2021</th>
<th>2021</th>
<th>地方</th>
<th>j用</th>
<th>无车牌</th>
<th>zfzq车</th>
<th>gw用车</th>
<th>tz车</th>
<th>qq车</th>
<th>xxx车</th>
<th>xxxxxxxx车</th>
<th>xx车</th>
<th>x车</th>
<th>其他</th>
<th>8年以下</th>
<th>8年及以上</th>
<th>10年及以上</th>
<th>行驶10万公里以下</th>
<th>行驶10万公里以上</th>
</tr>
</thead>
<tbody id="count-table-tbody">
<tr id="data-tr-22" class="count">
<td id="data-tr-22-td-region" rowspan="2">XX省</td>
<td>总计</td>
<td id="data-total-bz">1298</td>
<td id="data-total-sy">1221</td>
<td id="data-total-qb">77</td>
<td id="data-total-cp1">813</td>
<td id="data-total-cp2">406</td>
<td id="data-total-cp3">2</td>
<td id="data-total-cl1">900</td>
<td id="data-total-cl2">104</td>
<td id="data-total-cl3">22</td>
<td id="data-total-cl4">2</td>
<td id="data-total-cl5">10</td>
<td id="data-total-cl6">1</td>
<td id="data-total-cl7">1</td>
<td id="data-total-cl8">6</td>
<td id="data-total-cl9">175</td>
<td id="data-total-nx1">169</td>
<td id="data-total-nx2">169</td>
<td id="data-total-nx3">484</td>
<td id="data-total-gl1">747</td>
<td id="data-total-gl2">471</td>
</tr>
<tr id="data-tr-dept-100">
<td>XX省XXXXXXXX区域</td>
<td id="data-td-dept-100-bz">32</td>
<td id="data-td-dept-100-sy">30</td>
<td id="data-td-dept-100-qb">2</td>
<td id="data-td-dept-100-cp1">21</td>
<td id="data-td-dept-100-cp2">9</td>
<td id="data-td-dept-100-cp3"></td>
<td id="data-td-dept-100-cl1">25</td>
<td id="data-td-dept-100-cl2">5</td>
<td id="data-td-dept-100-cl3"></td>
<td id="data-td-dept-100-cl4"></td>
<td id="data-td-dept-100-cl5"></td>
<td id="data-td-dept-100-cl6"></td>
<td id="data-td-dept-100-cl7"></td>
<td id="data-td-dept-100-cl8"></td>
<td id="data-td-dept-100-cl9"></td>
<td id="data-td-dept-100-nx1">9</td>
<td id="data-td-dept-100-nx2">9</td>
<td id="data-td-dept-100-nx3">13</td>
<td id="data-td-dept-100-gl1">14</td>
<td id="data-td-dept-100-gl2">13</td>
</tr>
<tr id="data-tr-23" class="count">
<td id="data-tr-23-td-region" rowspan="12">XX1市</td>
<td>小计</td>
<td id="data-td-region-23-bz">162</td>
<td id="data-td-region-23-sy">153</td>
<td id="data-td-region-23-qb">-153</td>
<td id="data-td-region-23-cp1">121</td>
<td id="data-td-region-23-cp2">32</td>
<td id="data-td-region-23-cp3">0</td>
<td id="data-td-region-23-cl1">129</td>
<td id="data-td-region-23-cl2">6</td>
<td id="data-td-region-23-cl3">2</td>
<td id="data-td-region-23-cl4">0</td>
<td id="data-td-region-23-cl5">1</td>
<td id="data-td-region-23-cl6">0</td>
<td id="data-td-region-23-cl7">0</td>
<td id="data-td-region-23-cl8">0</td>
<td id="data-td-region-23-cl9">15</td>
<td id="data-td-region-23-nx1">11</td>
<td id="data-td-region-23-nx2">11</td>
<td id="data-td-region-23-nx3">47</td>
<td id="data-td-region-23-gl1">132</td>
<td id="data-td-region-23-gl2">21</td>
</tr>
<tr id="data-tr-dept-103">
<td>XX1市XXXXXXXX区域</td>
<td id="data-td-dept-103-bz">42</td>
<td id="data-td-dept-103-sy">42</td>
<td id="data-td-dept-103-qb">0</td>
<td id="data-td-dept-103-cp1">34</td>
<td id="data-td-dept-103-cp2">8</td>
<td id="data-td-dept-103-cp3"></td>
<td id="data-td-dept-103-cl1">35</td>
<td id="data-td-dept-103-cl2">3</td>
<td id="data-td-dept-103-cl3"></td>
<td id="data-td-dept-103-cl4"></td>
<td id="data-td-dept-103-cl5"></td>
<td id="data-td-dept-103-cl6"></td>
<td id="data-td-dept-103-cl7"></td>
<td id="data-td-dept-103-cl8"></td>
<td id="data-td-dept-103-cl9">4</td>
<td id="data-td-dept-103-nx1">1</td>
<td id="data-td-dept-103-nx2">1</td>
<td id="data-td-dept-103-nx3">8</td>
<td id="data-td-dept-103-gl1">36</td>
<td id="data-td-dept-103-gl2">6</td>
</tr>
<tr id="data-tr-dept-417">
<td>XX区XXXXXXXX</td>
<td id="data-td-dept-417-bz">17</td>
<td id="data-td-dept-417-sy">17</td>
<td id="data-td-dept-417-qb">0</td>
<td id="data-td-dept-417-cp1">15</td>
<td id="data-td-dept-417-cp2">2</td>
<td id="data-td-dept-417-cp3"></td>
<td id="data-td-dept-417-cl1">15</td>
<td id="data-td-dept-417-cl2"></td>
<td id="data-td-dept-417-cl3"></td>
<td id="data-td-dept-417-cl4"></td>
<td id="data-td-dept-417-cl5"></td>
<td id="data-td-dept-417-cl6"></td>
<td id="data-td-dept-417-cl7"></td>
<td id="data-td-dept-417-cl8"></td>
<td id="data-td-dept-417-cl9">2</td>
<td id="data-td-dept-417-nx1">2</td>
<td id="data-td-dept-417-nx2">2</td>
<td id="data-td-dept-417-nx3">3</td>
<td id="data-td-dept-417-gl1">16</td>
<td id="data-td-dept-417-gl2">1</td>
</tr>
<tr id="data-tr-dept-418">
<td>XX区XXXX</td>
<td id="data-td-dept-418-bz">10</td>
<td id="data-td-dept-418-sy">10</td>
<td id="data-td-dept-418-qb">0</td>
<td id="data-td-dept-418-cp1">9</td>
<td id="data-td-dept-418-cp2">1</td>
<td id="data-td-dept-418-cp3"></td>
<td id="data-td-dept-418-cl1">8</td>
<td id="data-td-dept-418-cl2">1</td>
<td id="data-td-dept-418-cl3"></td>
<td id="data-td-dept-418-cl4"></td>
<td id="data-td-dept-418-cl5"></td>
<td id="data-td-dept-418-cl6"></td>
<td id="data-td-dept-418-cl7"></td>
<td id="data-td-dept-418-cl8"></td>
<td id="data-td-dept-418-cl9">1</td>
<td id="data-td-dept-418-nx1"></td>
<td id=
本文介绍了如何使用CSS来实现表格头部的固定效果，确保在滚动内容时表头始终保持可见，提升用户在浏览大量数据时的体验。
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
