網上搜的基本都是4個table做的，數據處理比較麻煩，寫了個一個table的，此示例只固定了前兩列和最后一列，和網上的不太一樣。
網上搜的基本都是4個table做的，數據處理比較麻煩，寫了個一個table的，此示例只固定了前兩列和最后一列，和網上的不太一樣。
網上搜的基本都是4個table做的，數據處理比較麻煩，寫了個一個table的，此示例只固定了前兩列和最后一列，和網上的不太一樣。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#table {
position: relative;
}
#table th:first-child, #table th:nth-child(2), #table th:last-child, #table tr > td:first-child, #table tr > td:nth-child(2), #table tr > td:last-child {
background-color: #ff0000;
position: fixed;
z-index: 2;
}
</style>
<script src="../Scripts/jq/jquery-2.1.4/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function () {
if ($("#table>thead>tr>th").length > 5) {
//設置固定列的th和td的with都為最長的那個td的長度
var tdWith = 0;
$("#table tr>td:first-child").each(function (index, item) {
if ($(item).width() > tdWith) {
tdWith = $(item).width();
}
});
$("#table th:first-child,#table tr>td:first-child").width(tdWith);
tdWith = 0;
$("#table th:nth-child(2),#table tr>td:nth-child(2)").each(function (index, item) {
if ($(item).width() > tdWith) {
tdWith = $(item).width();
}
});
$("#table th:nth-child(2),#table tr>td:nth-child(2)").width(tdWith);
tdWith = 0;
$("#table th:last-child,#table tr>td:last-child").each(function (index, item) {
if ($(item).width() > tdWith) {
tdWith = $(item).width();
}
});
$("#table th:last-child,#table tr>td:last-child").width(tdWith);
//設置外面div的with
var div_abroadWith = 0;
$("#table>tbody>tr:first-child>td").each(function (index, item) {
if (index < 5) {
div_abroadWith += $(item).width();
} else {
return false;
}
});
//設置table的with
var tableWith = 0;
$("#table>tbody>tr:first-child>td").each(function (index, item) {
tableWith += $(item).width();
});
$("#table").width(tableWith);
div_abroadWith += $("#table th:last-child").width();
$("#div_abroad").width(div_abroadWith);
//設置固定列的偏移量
$("#table th:first-child,tr>td:first-child").css("left", $("#div_abroad").offset().left);
$("#table th:nth-child(2),tr>td:nth-child(2)").css("left", $("#div_abroad").offset().left + $("#table td:first-child").width());
$("#table th:last-child,tr>td:last-child").css("left", $("#div_abroad").offset().left + $("#div_abroad").width() - $("#table td:last-child").width());
//因為第一，二和最后一個設置定位了，所以table里缺少了3列造成滾動條不足，所以要為table補充3列，補充位置有要求，必須在第二列的后面補上第一，第二列。這兩列的寬度和原先的保持一致
//最后一列的上面要補充一列，寬度和最后一列保持一致。
var $td = $("<th style='width:" + $("#table th:first-child").width().toString() + "px'></th><th style='width:" + $("#table th:nth-child(2)").width().toString() + "px'></th>");
$("#table th").eq(2).before($td);
$td = "<td style='width:" + $("#table th:first-child").width().toString() + "px'></td><td style='width:" + $("#table th:nth-child(2)").width().toString() + "px'></td>";
$("#table tbody>tr").each(function (index, item) {
$(item).find("td").eq(2).before($($td));
});
$td = $("<td style='width:" + $("#table th:last-child").width().toString() + "px'></td>");
$("#table tbody>tr>td:last-child").before($td);
}
});
</script>
</head>
<body>
<div id="div_abroad" style="overflow-x: auto;width:300px;margin:50px auto;background:#4cff00">
<table id="table" style="border-collapse: collapse" borderColor=#000000 height=40 cellPadding=1 border=1>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
<th>列6</th>
<th>列7</th>
<th>列8</th>
<th>列9</th>
<th>列10</th>
</tr>
</thead>
<tbody>
<tr>
<td>111111111111111111111111</td>
<td>222222222</td>
<td>33333333</td>
<td>44444</td>
<td>555555555555555555555</td>
<td>66666666</td>
<td>777777</td>
<td>88888888</td>
<td>9999999</td>
<td>10959</td>
</tr>
<tr>
<td>111111111111111</td>
<td>22222222222</td>
<td>333333</td>
<td>444444444444</td>
<td>5555555555555555</td>
<td>666666666666</td>
<td>777777</td>
<td>88888888888888888</td>
<td>999999999999</td>
<td>109555559</td>
</tr>
<tr>
<td>111111111111111</td>
<td>222222222222222222222</td>
<td>333333333333</td>
<td>4444444</td>
<td>555555555555555555555</td>
<td>66666666</td>
<td>777777</td>
<td>88888888</td>
<td>9999999</td>
<td>109555999995559</td>
</tr>
<tr>
<td>111111111111111</td>
<td>22222222222</td>
<td>333333eeee33</td>
<td>44444</td>
<td>555555555555555555555</td>
<td>66666666</td>
<td>777wwww777</td>
<td>88888eee888</td>
<td>9999ww999</td>
<td>1095555559</td>
</tr>
<tr>
<td>111111111111111</td>
<td>22222222222222222222222222</td>
<td>333ww33333</td>
<td>44sss444</td>
<td>555555555555555555555</td>
<td>66666666</td>
<td>777777</td>
<td>88888</td>
<td>9999</td>
<td>10559</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
有時間在寫個固定表頭的，今天下班回家吃飯。
轉載注明