基于jquery的表头固定的若干方法

2020-05-19 07:38:56易采站长站整理

html{ overflow:hidden;}
.header{ width:1000px; margin:auto; height:40px; background:#ccc;}
.mainer{ width:1000px; margin:auto; height:auto; overflow-y:scroll;overflow-x:hidden;}
</style>
<script src=”jquery-1.4.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function OnResize() {
$(“.mainer”).height($(window).height() – 40);
}
$(function () {
onreszie();
});
</script>
</head>
<body onResize=”OnResize()”>
<div class=”header”>
<table border=”0″ cellpadding=”3″ cellspacing=”0″ width=”100%” class=”scrollTable”>
<thead>
<tr >
<th > </th>
<th colspan=”2″>列头</th>
<th colspan=”2″>列头</th>
<th colspan=”2″>列头</th>
</tr>
<tr >
<th >h1</th>
<th >h2</th>
<th >h3</th>
<th >h4</th>
<th >h5</th>
<th >h6</th>
<th >h7</th>
</tr>
</thead>
</table>
</div>
<div class=”mainer”>
<table border=”0″ cellpadding=”3″ cellspacing=”0″ width=”100%” class=”scrollTable”>
<tbody>
<tr>
<td >
<input type=”checkbox” name=”checkbox” value=”checkbox”>
a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td >
<input type=”checkbox” name=”checkbox2″ value=”checkbox”>
b</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
</tr>
<tr>
<td nowrap >
<input type=”checkbox” name=”checkbox3″ value=”checkbox”>
c</td>
<td nowrap>单元格2</td>
<td nowrap>单元格3</td>
<td nowrap>单元格4</td>
<td nowrap>单元格5</td>
<td nowrap>单元格6</td>
<td nowrap>单元格7</td>
</tr>
<tr>
<td >
<input type=”checkbox” name=”checkbox4″ value=”checkbox”>
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>