Table固定表头
一、原因
最近接收了一个项目，有个需求是把原来的表格改成固定表头和表尾，表数据可以滚动。一开始以为很简单，结果弄了两天才弄好。
二、参考文章
本文参考了此文章：css手写一个表头固定
按照参考文章写出来的表格基本符合要求，不过还是会有点表头与表数据单元格错位的问题
三、固定表头方法
1. 不可行方法
1.1 table上加scroll
此方法是在table的style里面加上overflow: scroll;属性，此方法可以有滚动效果，但是表头无法固定
1.2 在div上加scroll
此方法是在table外面加一层div，然后在div的style里面加上overflow: scroll;属性，此方法可以有滚动效果，但是表头无法固定
1.3 其他方法
在网上其实有找到很多方法，但是基本都是在Chrome中没问题，在IE中没有效果。但是我这个项目需要适配IE，所以只能舍弃那些方法了。
2. 可行方法
可行方法有两个，一个是使用纯CSS方式，一个是使用bootstrap-table来实现的
2.1 纯CSS方式
此方法是布三个table，一个放表头，一个放表数据，一个放表尾，然后将表格体加上高度height以及overflow-y。这种方法会出现表头表尾与表数据的单元格不对齐的问题，使用<colgroup>来解决这个问题。
在三个table标签下都定义一下相同的,注意列数与表格列数相同。参考文章中是最后一列可以不定义固定的宽，我有试过，发现定义和不定义都是一样的效果
<colgroup>
<col width="40%" />
<col width="7%" />
<col width="3%" />
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="6%"/>
<col width="5%"/>
</colgroup>
CSS代码：
<style>
.content{
width: 1600px;
}
.table_body{
height:200px;
overflow-y: scroll;
}
.table_head{
padding-right: 17px;
}
.table_body table,.table_head table{
width: 100%;
border-collapse : collapse;
table-layout: fixed;
}
</style>
为了避免文章过长，表格中的数据我只弄了一行，想看效果的可以多弄几行数据。
表格的代码：
<h4>Table固定表头：使用纯CSS方法</h4>
<div class="content">
<div class="table_head">
<table border>
<colgroup>
<col width="40%" />
<col width="7%" />
<col width="3%" />
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="6%"/>
<col width="5%"/>
</colgroup>
<thead>
<tr>
<th rowspan="2"><span> </span></th>
<th rowspan="2">Allocate<br/>Qty</th>
<th colspan="2">Preference</th>
<th colspan="6">Membership Engagement</th>
<th colspan="4">1010</th>
<th colspan="4">csl.</th>
<th rowspan="2">Remainder<br/>Qty</th>
<th rowspan="2">Used<br/>Qty</th>
</tr>
<tr>
<th>1st</th>
<th>2nd</th>
<th>Club</th>
<th>Non-Club</th>
<th>Club Like</th>
<th>Non-Club <br/>Like</th>
<th>5G Fast Pass</th>
<th>Non-5G <br/>Fast Pass</th>
<th>EB</th>
<th>NEW</th>
<th>In-Base</th>
<th>FTG</th>
<th>EB</th>
<th>NEW</th>
<th>In-Base</th>
<th>FTG</th>
</tr>
</thead>
</table>
</div>
<div class="table_body">
<table border>
<colgroup>
<col width="40%" />
<col width="7%" />
<col width="3%" />
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="6%"/>
<col width="5%"/>
</colgroup>
<tbody>
<tr>
<td>row 1-1</td>
<td>row 1-2</td>
<td>row 1-3</td>
<td>row 1-4</td>
<td>row 1-6</td>
<td>row 1-7</td>
<td>row 1-8</td>
<td>row 1-9</td>
<td>row 1-10</td>
<td>row 1-11</td>
<td>row 1-12</td>
<td>row 1-13</td>
<td>row 1-14</td>
<td>row 1-15</td>
<td>row 1-16</td>
<td>row 1-17</td>
<td>row 1-18</td>
<td>row 1-19</td>
<td>row 1-20</td>
<td>row 1-21</td>
</tr>
</tbody>
</table>
</div>
<div class="table_head">
<table width="100%" border="1" cellspacing="0" cellpadding="1">
<colgroup>
<col width="40%" />
<col width="7%" />
<col width="3%" />
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="3%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="5%"/>
<col width="6%"/>
<col width="5%"/>
</colgroup>
<tr bgcolor="#cccccc">
<td align="right"><span style="font-weight:bold;">Grand Total </span></td>
<td align="center"><span style="font-weight:bold;" id="SkuTotal">0</span></td>
<td colspan="16"><span> </span></td>
<td align="center"><span style="font-weight:bold;" id="SkuRemainTotal">0</span></td>
<td align="center"><span style="font-weight:bold;" id="SkuUsedTotal">0</span></td>
</tr>
<tr>
<td colspan="20"><span> </span></td>
</tr>
<tr>
<td colspan="20">
<button name="backBtn" style="width:120px;height:48px;">Back</button>
<button name="calcBtn" style="width:120px;height:48px;">Calculate</button>
<button name="saveBtn" style="width:120px;height:48px;">Save & Pending</button>
<button name="allocBtn" style="width:120px;height:48px;">Confirm & Allocate</button>
</td>
</tr>
</table>
</div>
</div>
IE效果图：
从效果图中可以看到，表格只是勉强可以用，其实还是有点单元格不对齐的情况。希望这个只是我这里的问题
Chrome效果图
在Chrome中就是没有问题的了
2.2 使用bootstrap-table方式
2.2.1 参考文章
bootstrap-table实现表头固定以及列固定的方法示例
bootstrap-table固定表头固定列
2.2.2 引入
bootstrap依赖于jquery
bootstrap-table依赖于bootstrap,所以都需要引入
<!-- 引入jQuery -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<!-- 引入bootstrap的js和css文件 -->
<link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" >
<script src="../js/bootstrap.min.js" ></script>
<!-- 固定表头所需的js和css(bootstrap-table) -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap-table.min.css" rel="external nofollow" >
<script src="../js/bootstrap-table.min.js"></script>
<!-- 固定列所需的js和css(bootstrap-table-fixed-columns) -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap-table-fixed-columns.css" rel="external nofollow" >
<script src="../js/bootstrap-table-fixed-columns.js"></script>
jquery-3.5.1.min下载地址：https://liangwanquan.lanzous.com/iB735gf5w7a
bootstrap.min.js下载地址：https://liangwanquan.lanzous.com/irhGigf5w3g
bootstrap.min.css下载地址：https://liangwanquan.lanzous.com/iRhq2gf5wdg
bootstrap-table.min.js下载地址：https://liangwanquan.lanzous.com/ihcFAgf5w4h
bootstrap-table.min.css下载地址：https://liangwanquan.lanzous.com/iLbS0gf5weh
bootstrap-table-fixed-columns.js下载地址：https://liangwanquan.lanzous.com/iBMRlgf7qnc
bootstrap-table-fixed-columns.css下载地址：https://liangwanquan.lanzous.com/iXHg0gf7q9i
注意不要引入jquery2.0.0(包括2.0.0)版本以下，如果你引入了2.0.0版本以下的jquery的话，当你编写完代码之后，在控制台会出现如下错误
2.2.3 表格代码
为了避免文章过长，表格中的数据我只弄了一行，想看效果的可以多弄几行数据。
<h4>Table固定表头：使用bootstrap方法</h4>
<div style="width: 160">
<table id="table"
class="table table-bordered table-hover"
data-toggle="table"
data-height="300"
>
<thead>
<tr>
<th rowspan="2"><span> </span></th>
<th rowspan="2">Allocate<br/>Qty</th>
<th colspan="2">Preference</th>
<th colspan="6">Membership Engagement</th>
<th colspan="4">1010</th>
<th colspan="4">csl.</th>
<th rowspan="2">Remainder<br/>Qty</th>
<th rowspan="2">Used<br/>Qty</th>
</tr>
<tr>
<th>1st</th>
<th>2nd</th>
<th>Club</th>
<th>Non-Club</th>
<th>Club Like</th>
<th>Non-Club <br/>Like</th>
<th>5G Fast Pass</th>
<th>Non-5G <br/>Fast Pass</th>
<th>EB</th>
<th>NEW</th>
<th>In-Base</th>
<th>FTG</th>
<th>EB</th>
<th>NEW</th>
<th>In-Base</th>
<th>FTG</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1-1</td>
<td>row 1-2</td>
<td>row 1-3</td>
<td>row 1-4</td>
<td>row 1-6</td>
<td>row 1-7</td>
<td>row 1-8</td>
<td>row 1-9</td>
<td>row 1-10</td>
<td>row 1-11</td>
<td>row 1-12</td>
<td>row 1-13</td>
<td>row 1-14</td>
<td>row 1-15</td>
<td>row 1-16</td>
<td>row 1-17</td>
<td>row 1-18</td>
<td>row 1-19</td>
<td>row 1-20</td>
<td>row 1-21</td>
</tr>
<tr bgcolor="#cccccc">
<td align="right"><span style="font-weight:bold;">Grand Total </span></td>
<td align="center"><span style="font-weight:bold;" id="SkuTotal">0</span></td>
<td colspan="16"><span> </span></td>
<td align="center"><span style="font-weight:bold;" id="SkuRemainTotal">0</span></td>
<td align="center"><span style="font-weight:bold;" id="SkuUsedTotal">0</span></td>
</tr>
<tr>
<td colspan="20"><span> </span></td>
</tr>
<tr>
<td colspan="20">
<button name="backBtn" style="width:120px;height:48px;">Back</button>
<button name="calcBtn" style="width:120px;height:48px;">Calculate</button>
<button name="saveBtn" style="width:120px;height:48px;">Save & Pending</button>
<button name="allocBtn" style="width:120px;height:48px;">Confirm & Allocate</button>
</td>
</tr>
</tbody>
</table>
</div>
上面代码中的table标签中的data-toggle="table"表示的是启用bootstrap表格，data-height="200"表示设置表格的高度，用于配置固定表头。
2.2.4 当浏览器窗口变化时，表头与表格不对齐解决
<script>
//表头与表格不对齐解决方法
$(function(){
$('#table').bootstrapTable();
$(window).resize(function () {
$('#table').bootstrapTable('resetView');
});
})
</script>
2.2.5 固定列
<script>
//固定列方法：
$(function(){
//#table表示的是上面table表格中的id
$("#table").bootstrapTable('destroy').bootstrapTable({
fixedColumns: true,
fixedNumber: 1 //固定列数
});
})
</script>
2.2.6 固定表尾
此方法暂时是只能固定表头，表尾暂时没有方法固定，待后续完成
2.2.7 效果图
Chrome：
IE：
2.2.8 更多情况
更多详细的配置可以查看参考文章
bootstrap-table实现表头固定以及列固定的方法示例
bootstrap-table固定表头固定列
关于bootstrap-table的属性可以参考此文章：
BootstrapTable中文文档
四、源码下载
源码地址：
- 码云：https://gitee.com/liangwanquan/table_head_fixed
- GitHub：https://github.com/liangwanquan/table_head_fixed
五、总结：如果有疑问可以直接留言评论，如果觉得对你有帮助，可以小小的赞赏一杯奶茶钱，谢谢！！
3758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
