JS固定简单table表头

最新推荐文章于 2024-08-13 08:09:12 发布

陳先森嗎

最新推荐文章于 2024-08-13 08:09:12 发布

阅读量1.4k

点赞数

文章标签： JS 固定表头

本文链接：https://blog.csdn.net/DackChen/article/details/88716800

版权

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");
		});
	});