html固定标题列、标题头table具体实现代码
导读：收集整理的这篇文章主要介绍了html固定标题列、标题头table具体实现代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 复制代码代码如下: <!DOCTYPE htML PubLIC "-//W3C//DTD XHT...
收集整理的这篇文章主要介绍了html固定标题列、标题头table具体实现代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 复制代码代码如下:
!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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html固定标题列、标题头table具体实现代码
本文地址： https://pptw.com/jishu/587856.html