前言
最近在写一个项目，然后要实现表头固定，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>
————效果如下图————
