来源：自学PHP网 时间：2014-12-15 15:58 作者： 阅读:次
[导读] 为了布局的美观度需要在html中固定标题列、标题头，本文整理了一些相关实现技巧，经测试还不错，感兴趣的朋友可以参考下哈，希望对你有所帮助...
|
为了布局的美观度需要在html中固定标题列、标题头，本文整理了一些相关实现技巧，经测试还不错，感兴趣的朋友可以参考下哈，希望对你有所帮助
 复制代码 代码如下:<!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> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
