核心思想:css加js实现:分为四个表格:,四个区域,左边一个大的div,右边一个大的div,各自包着上下两个div,,然后里面包着table,
右边特殊点,上边还包了一层div,才是表格:
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <title>固定标题列、标题头table</title> <style> table { border-collapse: collapse; border-spacing: 0px; width: 100%; border: #000 solid 0px; } table td { border: 1px solid #000; height: 25px; text-align: center; border-left: 0px; } table th { background: #edd3d4; color: #a10333; border: #000 solid 1px; white-space: nowrap; height: 21px; border-top: 0px; border-left: 0px; } .t_left { width: 20%; height: auto; float: left; border-top: 1px solid #000; border-left: 1px solid #000; } /*t_r_content和cl_freeze高度相差20px， 高度为外观显示高度，可根据情况调整*/ .t_r_content { width: 100%; height: 220px; background: #fff; overflow: auto; } .cl_freeze { height: 220px; overflow: hidden; width: 100%; } /* width 调整左边标题列宽度（左侧外观显示宽度）; 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/ /* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */ /* 如果显示不正常，调整 t_r的width 使其和t_left的width之和小于100%；等于100%时会有问题*/ .t_r { width: 69.5%; height: auto; float: left; border-top: 1px solid #000; border-right: #000 solid 1px; } .t_r table { width: 1700px; } .t_r_title { width: 1720px; } /*宽度比 t_r table 大20px （至少大20，小了滚动条滑到右侧显示有问题）*/ .t_r_t { width: 100%; overflow: hidden; } .bordertop { border-top: 0px; } </style> <script> function aa() { var a = document.getElementById("t_r_content").scrollTop; var b = document.getElementById("t_r_content").scrollLeft; document.getElementById("cl_freeze").scrollTop = a; document.getElementById("t_r_t").scrollLeft = b; } </script> </head> <body> <div style="width:100%"> <div class="t_left"> <div style="width:100%;"> <table> <tr> <th style="width:50%">账号</th> <th style="width:50%">姓名</th> </tr> </table> </div> <div class="cl_freeze" id="cl_freeze"> <table> <tr> <td style="width:50%" class="bordertop">1</td> <td style="width:50%" class="bordertop">1</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> </tr> <tr> <td>7</td> <td>7</td> </tr> <tr> <td>8</td> <td>8</td> </tr> <tr> <td>9</td> <td>9</td> </tr> <tr> <td>10</td> <td>10</td> </tr> <tr> <td>11</td> <td>11</td> </tr> <tr> <td>12</td> <td>12</td> </tr> <tr> <td>13</td> <td>13</td> </tr> <tr> <td>14</td> <td>14</td> </tr> <tr> <td>15</td> <td>15</td> </tr> <tr> <td>16</td> <td>16</td> </tr> <tr> <td>17</td> <td>17</td> </tr> <tr> <td>18</td> <td>18</td> </tr> <tr> <td>19</td> <td>19</td> </tr> <tr> <td>20</td> <td>20</td> </tr> </table> </div> </div> <div class="t_r"> <div class="t_r_t" id="t_r_t"> <div class="t_r_title"> <table> <tr> <th width="10%">字段A</th> <th width="20%">字段B</th> <th width="10%">字段C</th> <th width="20%">字段D</th> <th width="20%">字段E</th> <th width="20%">字段F</th> </tr> </table> </div> </div> <div class="t_r_content" id="t_r_content" onscroll="aa()"> <table> <tr> <td width="10%" class="bordertop">1</td> <td width="20%" class="bordertop">1</td> <td width="10%" class="bordertop">1</td> <td width="20%" class="bordertop">1</td> <td width="20%" class="bordertop">1</td> <td width="20%" class="bordertop">1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <td>6</td> <td>6</td> <td>6</td> <td>6</td> <td>6</td> <td>6</td> </tr> <tr> <td>7</td> <td>7</td> <td>7</td> <td>7</td> <td>7</td> <td>7</td> </tr> <tr> <td>8</td> <td>8</td> <td>8</td> <td>8</td> <td>8</td> <td>8</td> </tr> <tr> <td>9</td> <td>9</td> <td>9</td> <td>9</td> <td>9</td> <td>9</td> </tr> <tr> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> </tr> <tr> <td>13</td> <td>13</td> <td>13</td> <td>13</td> <td>13</td> <td>13</td> </tr> <tr> <td>14</td> <td>14</td> <td>14</td> <td>14</td> <td>14</td> <td>14</td> </tr> <tr> <td>15</td> <td>15</td> <td>15</td> <td>15</td> <td>15</td> <td>15</td> </tr> <tr> <td>16</td> <td>16</td> <td>16</td> <td>16</td> <td>16</td> <td>16</td> </tr> <tr> <td>17</td> <td>17</td> <td>17</td> <td>17</td> <td>17</td> <td>17</td> </tr> <tr> <td>18</td> <td>18</td> <td>18</td> <td>18</td> <td>18</td> <td>18</td> </tr> <tr> <td>19</td> <td>19</td> <td>19</td> <td>19</td> <td>19</td> <td>19</td> </tr> <tr> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> </tr> </table> </div> </div> </div> </body> </html>分析:
table { border-collapse: collapse; border-spacing: 0px; width: 100%; border: #000 solid 0px; }border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。inherit规定应该从父元素继承 border-collapse 属性的值。
border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
table td { border: 1px solid #000; height: 25px; text-align: center; border-left: 0px; } table th { background: #edd3d4; color: #a10333; border: #000 solid 1px; white-space: nowrap; height: 41px; border-top: 2px; border-left: 2px; }
white-space规定段落中的文本不进行换行：
normal
默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。.t_left { width: 20%; height: auto; float: left; border-top: 1px solid #000; border-left: 1px solid #000; } .t_r_content { width: 100%; height: 220px; background: #fff; overflow: auto; } .cl_freeze { height: 220px; overflow: hidden; width: 100%; } <script> function aa() { var a = document.getElementById("t_r_content").scrollTop; var b = document.getElementById("t_r_content").scrollLeft; document.getElementById("cl_freeze").scrollTop = a; document.getElementById("t_r_t").scrollLeft = b; } </script>
滑动触发:
解释：元素滚动条内的顶部隐藏部分的高度。
