|
<!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) {
//設(shè)置固定列的th和td的with都為最長(zhǎng)的那個(gè)td的長(zhǎng)度
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);
//設(shè)置外面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;
}
});
//設(shè)置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);
//設(shè)置固定列的偏移量
$("#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());
//因?yàn)榈谝?，二和最后一個(gè)設(shè)置定位了，所以table里缺少了3列造成滾動(dòng)條不足，所以要為table補(bǔ)充3列，補(bǔ)充位置有要求，必須在第二列的后面補(bǔ)上第一，第二列。這兩列的寬度和原先的保持一致
//最后一列的上面要補(bǔ)充一列，寬度和最后一列保持一致。
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>
|
