表格內容很多，需要把成表格的第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; //左側未滾動時的left
var 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; //表格左側是的left
flagLeftLength = $(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);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;}