table 固定列和行的实现

最新推荐文章于 2024-08-06 17:53:41 发布

启福铭远

最新推荐文章于 2024-08-06 17:53:41 发布

阅读量9.8k

点赞数

分类专栏：经验总结

本文链接：https://blog.csdn.net/wangwei249/article/details/51659120

版权

这篇博客探讨了如何在HTML表格中实现固定列和行的难点，特别是当表格具有动态宽度和高度时，如何确保复制部分的样式与原始表格一致。文章介绍了主要的实现方法和步骤。

摘要由CSDN通过智能技术生成

处理思路：
复制出一个和原始表一样的table(只保留需要固定的列或行), 覆盖到原始表上对应的行或列上，滚动时进行位置调整处理，使其始终保持固定位置不变

难点：复制出的行或列的高度和宽度要和原始表保持一致，当原始表指定固定宽高时比较简单，复制出的行列宽高保持一致即可，否则复制出的表样式要和原始表相同.

使用方法：
1. 主调用方法入口：

  <body οnlοad="showFix(true,false,initTableId);">

2. 复制原始表的行或列，这个自己复制吧，div名称统一命名，示例如下

<pre name="code" class="html">  <!-- 复制的固定头两列 -->
  <div id="fixedColumnDiv" align="center" style="width:100px;position:Fixed;display:none;"> 
  <table id='columnTable' id='fixedColumn'>
    <tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr>
	<tr bgcolor="red"><td>111</td><td>222</td></tr> 
  </table>
  </div>

  <!-- 复制的固定头一行 -->
  <div id="fixedRowDiv" align="center" style="height:auto;position:Fixed;display:none;"> 
  <table>
    <tr bgcolor="blue" id='fixedRow'>
		<td>111</td><td>222</td><td>333</td><td>444</td><td>555</td><td>666</td>
		<td>777</td><td>888</td><td>999</td><td>000</td><td>aaa</td><td>bbb</td>
		<td>ccc</td><td>ddd</td><td>eee</td><td>fff</td><td>ggg</td><td>nnn</td>
		<td>bbb</td><td>ccc</td><td>www</td><td>eee</td><td>vvv</td><td>rrr</td>
    </tr>
  </table>
 </div>

完整代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    body{
	   ma