版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36671474/article/details/79622111
前言
最近在写一个项目，然后要实现表头固定，tbody内容滚动的效果，该项目中没有使用任何插件，并且表格列数蛮多的，刚开始实现起来遇到各种问题，感觉蛮复杂的，后来找到了一种利用transform的方法实现，效果还不错，请看代码~~~~~~
————代码————
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
.table{
width:100%;
max-width: 100%;
}
.table>thead>tr{
background: #edf7ff;
}
.table>thead>tr>th {
white-space: nowrap;
padding: 8px;
line-height: 1.42857143;
}
.table>tbody>tr:nth-child(odd){
background: #fff;
}
.table>tbody>tr:nth-child(even){
background: #f7f7f7;
}
.table>tbody>tr:hover{
background: #e3ecfc;
}
.table-cont{
/**make table can scroll**/
max-height: 500px;
overflow: auto;
/** add some style**/
/*padding: 2px;*/
background: #ddd;
margin: 20px 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class='table-cont' id='table-cont'><!--看这里-->
<table class="table table-striped">
<thead>
<tr>
<th>委托编号</th>
<th>交易日</th>
<th>账户编号</th>
<th>账户名称</th>
<th>组合编号</th>
<th>组合名称</th>
<th>自定义订单编号</th>
<th>证券代码</th>
<th>证券名称</th>
<th>交易所</th>
<th>价格类型</th>
<th>委托价格</th>
<th>委托数量</th>
<th>委托金额</th>
<th>买卖方向</th>
<th>订单状态</th>
<th>组合开平标志</th>
<th>组合投机套保标志</th>
<th>备兑标志</th>
<th>报单类型</th>
<th>今成交数量</th>
<th>今成交金额</th>
<th>撤成\废单数量</th>
<th>剩余数量</th>
<th>订单总费用</th>
<th>报单日期</th>
<th>委托时间</th>
<th>最后修改时间</th>
<th>撤销时间</th>
<th>撤单编号</th>
<th>操作员编号</th>
<th>操作员名称</th>
<th>柜台委托编号</th>
<th>订单IP</th>
<th>订单MAC</th>
<th>订单硬盘序列号</th>
<th>订单机器码</th>
<th>订单操作系统</th>
<th>会话编号</th>
<th>前置编号</th>
<th>交易编码</th>
<th>席位号</th>
<th>营业部代码</th>
<th>有效期类型</th>
<th>成交量类型</th>
<th>最小成交量</th>
<th>触发条件</th>
<th>止损价</th>
<th>OR委托编号</th>
<th>状态信息</th>
<th>发起标志</th>
<th>预留字段1</th>
<th>预留字段2</th>
<th>撤单标志</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
<tr>
<td>委托编号</td>
<td>交易日</td>
<td>账户编号</td>
<td>账户名称</td>
<td>组合编号</td>
<td>组合名称</td>
<td>自定义订单编号</td>
<td>证券代码</td>
<td>证券名称</td>
<td>交易所</td>
<td>价格类型</td>
<td>委托价格</td>
<td>委托数量</td>
<td>委托金额</td>
<td>买卖方向</td>
<td>订单状态</td>
<td>组合开平标志</td>
<td>组合投机套保标志</td>
<td>备兑标志</td>
<td>报单类型</td>
<td>今成交数量</td>
<td>今成交金额</td>
<td>撤成\废单数量</td>
<td>剩余数量</td>
<td>订单总费用</td>
<td>报单日期</td>
<td>委托时间</td>
<td>最后修改时间</td>
<td>撤销时间</td>
<td>撤单编号</td>
<td>操作员编号</td>
<td>操作员名称</td>
<td>柜台委托编号</td>
<td>订单IP</td>
<td>订单MAC</td>
<td>订单硬盘序列号</td>
<td>订单机器码</td>
<td>订单操作系统</td>
<td>会话编号</td>
<td>前置编号</td>
<td>交易编码</td>
<td>席位号</td>
<td>营业部代码</td>
<td>有效期类型</td>
<td>成交量类型</td>
<td>最小成交量</td>
<td>触发条件</td>
<td>止损价</td>
<td>OR委托编号</td>
<td>状态信息</td>
<td>发起标志</td>
<td>预留字段1</td>
<td>预留字段2</td>
<td>撤单标志</td>
<td>备注</td>
</tr>
</tbody>
</table>
</div>
<script>
window.onload = function(){
var tableCont = document.querySelector('#table-cont');
function scrollHandle (e){
console.log(this);
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
}
</script>
</body>
</html>————效果如下图————