table表格头部和前几列固定js

表格内容很多，需要把成表格的第1行和前4列固定住，其他td滑动。

看了这篇文章写得不错 https://www.cnblogs.com/yougewe/p/5484251.html 写得很清楚，但是表格滑动的时候出现严重错位，下了作者最新上传的代码 2018-01-14 11:10 还是有错位；

我看了js文件，在获取td和th的宽高时有些用的innerWidth()和height()；innerWidth()包括padding，但是不包括border和margin；height()不包含padding，border和margin；我猜是因为这个而造成错位的；

具体height()，innerHeight()，outerHeight()，可以看http://www.365mini.com/page/jquery-height-vs-innerheight-vs-outerheight.htm 或自行查看其他资料；

实现原理就是把头部和前几列复制出来单独另两个表格，然后用定位；代码有点多直接复制粘贴就可以了，如需改左边固定列数，改leftIndex的值就ok了；

$(function() {//表格固定头部if ($("#J_MagicTable").length > 0) {var blockHeadingHeight = $("#J_BlockHeading").outerHeight();$('#J_MagicTable').magicTable({thfix: blockHeadingHeight, leftIndex: 3, leftFlg: true});//leftIndex:3;左边固定四列}
});

独立代码：html

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><title>表格第一行和前几列固定</title><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="./css/theme.css"><script src="https://cdn.bootcss.com/jquery/1.11.1-rc1/jquery.js" type="text/javascript"></script><script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script><script src="./js/magicTable.js" type="text/javascript"></script></head><body> <div class="row-fluid row-data"style="margin-left: 0px; width: 2100px;"><table id="J_MagicTableTop" class="table table-striped table-bordered table-hover" style="display:none;"></table><table id="J_MagicTable" class="table table-striped table-bordered table-hover"><thead><tr><th style="width:100px;">日期</th><th style="width:139px;">QQQ</th><th style="width:60px;">第三</th><th style="width:65px;"><a href="#">第四</a></th><th style="width:55px;" title="当日点击用户（去重）/当日活跃用户">第五</th><th style="width:55px;" title="点击总数/当日活跃用户">第六</th><th style="width:55px;">第七</th><th style="width:40px;">第八</th><th style="width:85px;">第九</th><th style="width:50px;">第十</th><th style="width:40px;">第十一</th><th style="width:80px;">第十二</th><th style="width:80px;">第十三</th><th style="width:80px;">第十四</th><th style="width:80px;">第十五</th><th style="width:80px;">第十六</th><th style="width:80px;">第十七</th><th style="width:80px;">第十八</th><th style="width:90px;">第十九</th><th style="width:90px;">第二十</th><th style="width:90px;">第二十一</th><th style="width:70px;">第二十二</th></tr></thead><tbody><tr><td>2011-01-01</td><td>65757657</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>楷艰用</td><td>梦</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-12-31</td><td>8797898980</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >为什么会这样子呢电视剧啊肯定会及扩散大数据库大家撒大叔控登记卡萨记得啊数据库大叔控打卡上打卡上大家看阿斯达克杀菌灯刷卡大家撒打卡上啊就独守空房过段时间附近的思考和房价开始放大镜看回复发到手机卡复活</td><td >7898790%</td></tr><tr><td>2061-11-31</td><td>ddffgdgdfgfd</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2019-11-31</td><td>dxcghfhyuyt222</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-11-31</td><td>467867thgjhmmhm</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-11-31</td><td>467867thgjhmmhm</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-11-31</td><td>dxcghfhyuyt222</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">电话费等接口是否和大家可舒服的健身房和大家上飞机对双方都技术开发火炬大厦发动机上房顶上</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-11-31</td><td>65757657</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>楷艰用</td><td>梦</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-12-31</td><td>8797898980</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2061-11-31</td><td>ddffgdgdfgfd</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2019-11-31</td><td>dxcghfhyuyt222</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-11-31</td><td>467867thgjhmmhm</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-11-31</td><td>467867thgjhmmhm</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-11-31</td><td>dxcghfhyuyt222</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-11-31</td><td>65757657</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>楷艰用</td><td>梦</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr><tr><td>2011-12-31</td><td>8797898980</td><td>fdsffdg</td><td><a href="#" title="点击查看平均单次使用时长明细" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a></td><td>111</td>  <td><a target="_blank" href="#">545645</a></td><td>555</td><td>333</td><td class="cRed"><a target="_blank" href="#">444%</a></td><td class="cRed"><a target="_blank" href="#">2343535%</a></td><td>24354456</td><td>7897565656654</td><td>23432432%</td><td style="color:red">2342432234545</td><td >6787687686</td><td >232222</td><td >453546786</td><td>4353535%</td><td >567686%</td><td >789798%</td><td >456546456%</td><td >7898790%</td></tr></tbody></table><table id="J_MagicTableLeft" class="table magic-table-left table-striped table-bordered table-hover" style="display:none;"></table></div></body>
</html>
<script>
$(function() {//表格固定头部if ($("#J_MagicTable").length > 0) {var blockHeadingHeight = $("#J_BlockHeading").outerHeight();$('#J_MagicTable').magicTable({thfix: blockHeadingHeight, leftIndex: 3, leftFlg: true});//leftIndex:3;左边固定四列}
});
</script>

magicTable.js

(function($) {$.fn.magicTable = function(option) {$.fn.magicTable.option = {/* 浮动头部 */'magicTop': $('#J_MagicTableTop'),'magicLeft': $('#J_MagicTableLeft'),/* 可能有隐藏的，所以设定浮动头部的开始索引 */'leftIndex': 0,'leftFlg': false,/* 高度调整 */"thfix": 0,"thWidth": 0, //左边显示的宽度"thHeight": 0,"thTop": 0,"thLeft":0,"thLine": 0,"removeTotal": false,};var option = $.extend({}, $.fn.magicTable.option, option);return this.each(function() {$(this).css({'z-index': '9', 'display': '', 'position': 'relative'});/*复制活动的表格内容*/var leftHtml = '';var leftHtml2 = '';var leftFlg = option.leftFlg;var thWidth = option.thWidth;var thHeight = 0; //th的高度var thTop = option.thTop; //th距离浏览器顶部的top高度var thLeft = option.thLeft; //左侧未滚动时的leftvar removeTotal = option.removeTotal;//除去最后一行的汇总var flagLeftLength = 0; //左侧显示浮动层时的临界点//处理浮动的头部var topThHtml='';var thLenght = $(this).find('>thead>tr>th').length;$(this).find('>thead>tr').each(function(){var tmpTopHtml = '';var thTmp = '';for(var m = 0; m < thLenght; m++){tmpTopHtml += '<th style="height:' + $(this).find('th:eq(' + m + ')').outerHeight(true) + 'px;width:' + $(this).find('th:eq(' + m + ')').outerWidth() + 'px">' + $(this).find('th:eq(' + m + ')').html() + '</th>';              }topThHtml = '<thead><tr>' + tmpTopHtml + '</tr></thead>';})option.magicTop.html(topThHtml).css({'width': $(this).outerWidth(true)});;var trLenght = $(this).find('>tbody>tr').length;if(removeTotal){trLenght -= 1;}$(this).find('tr').each(function(i, item) {if (i == option.thLine){thTop = thTop > 0 ? thTop : $(this).find('th:first').offset().top;thHeight = $(this).height();  //包围th的tr的高度thLeft = $(this).offset().left; //表格左侧是的leftflagLeftLength = $(this).find('th:eq(' + option.leftIndex + ')').offset().left; thWidth = flagLeftLength + $(this).find('th:eq(' + option.leftIndex + ')').outerWidth() - thLeft;} else if (i > option.thLine) {if (leftFlg && (i <= trLenght)){var tmpHtml = '';for (var j = 0; j <= option.leftIndex; j++) {tmpHtml += '<td style="height:' + $(this).find('td:eq(' + j + ')').outerHeight(true) + 'px;width:' + $(this).find('td:eq(' + j + ')').innerWidth() + 'px">' + $(this).find('td:eq(' + j + ')').html() + '</td>';}leftHtml2 += '<tr>' + tmpHtml + '</tr>';}leftHtml = leftHtml + '<tr><td style="height:' + $(this).find('td:eq(' + option.leftIndex + ')').outerHeight(true) + 'px">' + $(this).find('td:eq(' + option.leftIndex + ')').html() + '</td><tr>';     }});if (leftFlg) {leftHtml = leftHtml2;option.magicLeft.html(leftHtml);}/*活动模块*/function moveSquare(){if ($(this).scrollTop() >= thTop){option.magicTop.show().css({'z-index': '999', 'position': 'absolute', 'top': $(this).scrollTop() + option.thfix + 'px'});} else {option.magicTop.css({'display': 'none'});}if ($(this).scrollLeft() >= thLeft + 1) {option.magicLeft.show().css({'z-index': '99', 'position': 'absolute', 'top': thTop + thHeight + 'px','left': $(this).scrollLeft() + 'px','width': thWidth + 'px',});if ($(this).scrollTop() >= thTop){option.magicLeft.show().css({'top': thTop + thHeight - option.thfix + 'px',});}} else {option.magicLeft.css({'display': 'none'});}}if (document.all) {window.attachEvent("onscroll", moveSquare);} else {window.addEventListener('scroll', moveSquare, false);}});};$.fn.magicTable.setDefaults = function(settings) {$.extend($.fn.magicTable.option, settings);};
})(jQuery);

theme.css

body { background: #eee url('/images/admin/furley_bg.png'); font-family: helvetica,"Microsoft Yahei",sans-serif; color: #333; font-size: 12px;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0;outline: 0 none;padding: 0;
}
ul, li {list-style: none;}a{blr:expression(this.onFocus=this.close());} /* 只支持IE，过多使用效率低 */
a{blr:expression(this.onFocus=this.blur());} /* 只支持IE，过多使用效率低 */
a:focus { -moz-outline-style: none; } /* IE不支持 */
a:focus { outline: none; } /*很多网站都会加的属性*/
a:hover {text-decoration: none;}
hr {border-top: 1px solid #ddd; border-bottom: 1px solid #fff;}.no-padding { padding: 0 !important;}
.no-padding-bottom {padding-bottom: 0 !important;}
.no-padding-top {padding-top: 0 !important;}
.no-padding-left { padding-left: 0 !important;}
.no-padding-right {padding-right: 0 !important;}
.no-margin {margin: 0 !important;}
.no-margin-bottom {margin-bottom: 0 !important;}
.no-margin-top {margin-top: 0 !important;}
.no-margin-left { margin-left: 0 !important;}
.no-margin-right { margin-right: 0 !important;}
.no-border { border: 0 none;}
.no-border-bottom { border-bottom: 0 none;}
.no-border-top {border-top: 0 none;}
.no-border-left { border-left: medium none;}
.no-border-right { border-right: 0 none;}
.no-underline {text-decoration: none !important;}
.no-hover-underline:hover { text-decoration: none !important;}
.no-shadow, .no-box-shadow {box-shadow: none !important;}
.no-text-shadow {text-shadow: none !important;}.icon {background: url("/images/inons/icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);display: inline-block;height: 24px;line-height: 24px;overflow: hidden;text-indent: -9999px;vertical-align: middle;width: 24px;
}
.export {background-position: 0 -72px;cursor: pointer;
}
.icon-lt {background-position: 0 -1009px;
}
.icon-close {background-position: 0 -793px;
}/*Navbar*/
.navbar { position: relative; z-index: 20; margin-bottom: 0;  box-shadow: 0px 0px 3px #ccc; -webkit-box-shadow: 0px 0px 3px #ccc; -moz-box-shadow: 0px 0px 3px #ccc;}
.navbar .brand { text-shadow: none;}
.navbar .navbar-inner {background: #4d5b76;background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4d5b76), color-stop(1, #6c7a95));background: -ms-linear-gradient(bottom, #4d5b76, #6c7a95);background: -moz-linear-gradient(center bottom, #4d5b76 0%, #6c7a95 100%);background: -o-linear-gradient(bottom, #4d5b76, #6c7a95);filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#6c7a95',EndColorStr='#4d5b76')";padding: 0em 1em;margin: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;border: 0px;border-bottom: none;
}
.navbar .nav {margin: 0em; margin-right: -1em;}
.navbar .nav > li > a { color: #fff; text-shadow: none;}
.navbar .nav > li:hover { sbackground-color: #444;}
.navbar .nav > li > a:hover { color: #fff;}
.navbar .dropdown-menu a:hover {background: none; color: #000;}
.navbar .nav li.dropdown.open > .dropdown-toggle {background-color: #444;color: #fff;}/** content **/
.content { min-width: 400px; position: relative; min-height: 600px; background: #fff; border-left: none; padding-top: 35px;}
.header {background: #ffffff;background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e6e6e6), color-stop(1, #ffffff));background: -ms-linear-gradient(bottom, #e6e6e6, #ffffff);background: -moz-linear-gradient(center bottom, #e6e6e6 0%, #ffffff 100%);background: -o-linear-gradient(bottom, #e6e6e6, #ffffff);filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#e6e6e6')";border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;padding: 0em 15px;
}.breadcrumb {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;background: #eee;border-bottom: 1px solid #aaa;border-top: 1px solid #fafafa;border-left: 1px solid #fff;margin-bottom: .5em;width: 100%;position: fixed;top: 0;margin-bottom: 50px;
}.container-fluid {margin-top:15px;}
.page-content { padding: 1em;}a.block-heading:hover,
.block-heading a:hover,
a.block-heading-nofloat:hover,
.block-heading-nofloat a:hover
{background: #dddddd;background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dddddd), color-stop(1, #fdfdfd));background: -ms-linear-gradient(bottom, #dddddd, #fdfdfd);background: -moz-linear-gradient(center bottom, #dddddd 0%, #fdfdfd 100%);background: -o-linear-gradient(bottom, #dddddd, #fdfdfd);filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd',EndColorStr='#dddddd')";color: #505050;
}
/*Tabs*/
.nav-tabs  > li {margin-left: .5em;
}
table.table.list tr:first-child td {border-top: 0px;
}
/* Tweaks for mobile */
@media (max-width: 641px) {.content {margin: 0em;}.sidebar-nav {float: none;width: auto;position: relative;}h1 {text-align: center;}.stats {text-align: center;margin-top: 1em;}.stats .stat {float: none;display: inline;}.stat-widget-container .stat-widget {font-size: .5em;}
}
@media (max-width: 900px) {body.http-error {font-size: .75em;}body.http-error .error-message {padding: 0em 1em;}
}
@media (max-width: 851px) {.stat-widget-container .stat-widget {font-size: .75em;}
}
@media (max-width: 767px) {footer hr {margin-left: 0em;margin-right: 0em;}
}
@media (max-width: 604px) {body.http-error {font-size: .5em;}
}th, td, .table-bordered {border-radius: 0 !important;text-align: left;
}
.table thead tr {background: linear-gradient(to bottom, #F8F8F8 0px, #ECECEC 100%) repeat-x scroll 0 0 #F2F2F2;color: #707070;font-weight: normal;
}
.table thead tr th {border-color: #DDDDDD;font-weight: bold;
}
.table thead tr th [class*="icon-"]:first-child {margin-right: 2px;
}
.table thead tr th:first-child {border-left-color: #F1F1F1;
}
.table.table-bordered thead tr th {vertical-align: middle;
}
.table.table-bordered thead tr th:first-child {border-left-color: #DDDDDD;
}
th.center, td.center {text-align: center;
}
th .lbl, td .lbl {margin-bottom: 0;
}
th .lbl:only-child, td .lbl:only-child {vertical-align: top;
}
.table-header {background-color: #307ECC;color: #FFFFFF;font-size: 14px;line-height: 38px;margin-bottom: 1px;padding-left: 12px;
}
.table-header .close {margin-right: 8px;margin-top: 0;opacity: 0.45;
}
.table-header .close:hover {opacity: 0.75;
}
.table .num, .block-table .num{font-size:14px;}
.table .rate, .block-table .rate {color:red; padding-left: 15px;}.table tr.sum{ background-color: #E0E7F2;}/** 魔术表格 **/
.magic-table-top, .magic-table-left {display: none; background: #e1e1e1;}
.magic-table-top td, .magic-table-left td {border:1px solid #ccc;}/*特殊颜色*/
.cRed, .cRed a {color:red;}
.cGreen, .cGreen a {color:green;}
.cBlue, .cBlue a {color:blue;}

table表格头部和前几列固定js相关推荐

csstable跨列居中_html中table表格如何跨行或跨列合并单元格
在html中的table表格实现跨行或跨列合并单元格,需要用到以下两个属性: 1.跨列colspan属性:就是合并左右关系的单元格: 2.跨行rowspan属性:就是合并上下关系的单元格: 而在tab ...
Excel文件首行固定前n行固定首列固定前n列固定
1.首行首列固定 2.前n行固定或者前n列固定选中第n+1行或者第n+1列,在冻结窗口下来选项中,选 "冻结拆分窗格"命令. 3.固定前n行前m列.(此处以n=3,m=5 ...
bootstrap table 怎么实现前两列固定冻结？
$("#Table").bootstrapTable('destroy').bootstrapTable({pagination: true,//分页minimumCountCol ...
Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
Element-ui为Table表格头部设置背景颜色(高亮)
首先来到Element-ui官网的Table表格这里,往下翻可以看到,有属性(highlight-current-row)可以为行设置高亮,但是我自己设置时没有生效.通过查阅发现别人设置表格头部是通过 ...
Table表格字段居中,跨行跨列
1.整个表格字段居中 <table id="contentTable" style="text-align: center;"> </tab ...
【ElementUI】 table表格尾部的合计行，固定表头却不显示合计行
背景按照官网要求不固定表头,添加show-summary就可以显示合计行问题但是给table加了一个固定高度之后,就不显示了, 打开控制台可以看到这个合计是存在的那么需要做两步,合计即可出现 ...
使用jquery实现table表格的动态添加行和列
<table class="table" border="1px" cellspacing="0" cellpadding=" ...
java 使用poi导出excel，可控制固定前2列固定标头排版，带统计数据格式的
使用poi导出排版漂亮的excel文件 html代码: <button class="btn btn-link" ng-model="exportExcel&quo ...
layui table表格展示鼠标滑过列显示tips
鼠标滑过操作列 // 鼠标滑过操作列 var tip_index = 0; $(document).on('mouseenter', '#proStatus', function(){tip_inde ...

table表格头部和前几列固定js

table表格头部和前几列固定js相关推荐

最新文章

热门文章