<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" /> <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: 30%; 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: 200px; overflow: hidden; width: 100%; } /* 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=" 100%"> <div class="t_left"> <div style=" 100%;"> <table> <tr> <th style=" 40%">账号</th> <th style=" 60%">姓名</th> </tr> </table> </div> <div class="cl_freeze" id="cl_freeze"> <table> <tr> <td style=" 40%" class="bordertop">1</td> <td style=" 60%" 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>