html固定标题列、标题头table具体实现代码
2013-04-26 16:22
465 查看
<!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>
相关文章推荐
- html之一行代码给table设置标题...
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
- 不用xib文件,直接用代码实现xib。实现一个toolbar,tableview,具体如效果图
- css固定table表头的实现代码可同时看到表头和表格底部
- html之一行代码给table设置标题...
- HTML Table 固定列宽,实现excel表格效果
- html固定table表头的实现思路
- html table css 实现固定表头的办法
- html Table实现表头固定
- html固定标题列、标题头table
- html Table实现表头固定
- ASP.NET 固定标题列与栏位的具体实现
- 利用js+css+html实现固定table的列头不动
- python调用HTMLTestRunner+unittest实现一次执行多个测试类,并生成与每个测试类对应的测试报告,并不像某些人写的每次只执行一个测试类,具体看代码,附上整个project代码
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- js 实现table标题固定
- html Table实现表头固定
- java利用htmlparser获取html中想要的代码具体实现
- html固定table表头的实现思路