JS固定简单table表头

1、画一个table 

<body>
  <!--  定义一个table表格 -->
  <div id="tabdiv" style="width: 400px; height: 220px; overflow: auto; position: relative;">
    <table id="dataTZModal" class="table table-bordered table-hover"
		style="text-align: center; table-layout: fixed; width: 100%;margin-top:30px;">
      <col width="60" />
        <col width="60" />
		<col width="60" />
		<col width="60" />
		<col width="60" />
		<col width="60" />
	  <thead id="tabhead" style="position: absolute;width:100%; top:0px;background-color:lightblue;">
		<tr>
		  <th style="text-align: center;width: 60px;">Test1</th>
		  <th style="text-align: center;width: 60px;">Test2</th>
		  <th style="text-align: center;width: 60px;">Test3</th>
		  <th style="text-align: center;width: 60px;">Test4</th>
		  <th style="text-align: center;width: 60px;">Test5</th>
		  <th style="text-align: center;width: 60px;">Test6</th>
		</tr>
	  </thead>
	  <tbody id="tbodyElecDiv">
		<tr>
		  <td>111111</td>
		  <td>222222</td>
		  <td>333333</td>
		  <td>444444</td>
		  <td>555555</td>
		  <td>666666</td>
	    </tr>
		<tr>
		  <td>111111</td>
		  <td>222222</td>
		  <td>333333</td>
		  <td>444444</td>
		  <td>555555</td>
		  <td>666666</td>
	    </tr>
        <tr>
		  <td>111111</td>
		  <td>222222</td>
		  <td>333333</td>
		  <td>444444</td>
		  <td>555555</td>
		  <td>666666</td>
	    </tr>
        <tr>
		  <td>111111</td>
		  <td>222222</td>
		  <td>333333</td>
		  <td>444444</td>
		  <td>555555</td>
		  <td>666666</td>
	    </tr>
        <tr>
		  <td>111111</td>
		  <td>222222</td>
		  <td>333333</td>
		  <td>444444</td>
		  <td>555555</td>
		  <td>666666</td>
	    </tr>
        <tr>
		  <td>111111</td>
		  <td>222222</td>
		  <td>333333</td>
		  <td>444444</td>
		  <td>555555</td>
		  <td>666666</td>
	    </tr>
		</tbody>
	</table>
    </div>
</body>

 

2、利用JS是表头固定

	$(function() {
		$("#tabhead").css("width", $("#dataTZModal").css("width"));
		$("#tabdiv").scroll(function() { // 滚动条移动事件
			var yheight = $("#tabdiv").scrollTop(); // 滚动条距顶端的距离
			$("#tabhead").css("top", yheight + "px");
		});
	});

3、效果

4、需要注意的地方

table的css:margin-top:30px;这个30px是表头的高度

width: 400px; height: 220px;这个width最好是和几个<col/>的宽度加起来差不多,略大于加起来的值比较适宜。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值