<!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 調整左邊標題列寬度（左側外觀顯示寬度）; 指定為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: 40%">賬號</th> <th style="width: 60%">姓名</th> </tr> </table> </div> <div class="cl_freeze" id="cl_freeze"> <table> <tr> <td style="width: 40%" class="bordertop">1</td> <td style="width: 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>