js简单固定table表头及css问题分析。
<head> <meta name="viewport" content="width=device-width" /> <title>Test02</title> <script src="~/Content/js/jquery-1.7.2.min.js"></script> <script> $(document).ready(function () { $("#tabhead").css("width", $("#MyTable").css("width")); $("#tabdiv").scroll(function () { // 滚动条移动事件 var yheight = $("#tabdiv").scrollTop(); // 滚动条距顶端的距离 $("#tabhead").css("top", yheight + "px"); }); }); </script> </head>
<body> <div id="tabdiv" style="width: 500px; height: 150px; overflow: auto; position: relative; "> <table id="MyTable" style=" text-align: center; table-layout: fixed; width: 100%;margin-top:50px;"> <col width="105" /> <col width="105" /> <col width="70" /> <col width="70" /> <col width="70" /> <col width="80" /> <col width="80" /> <col width="80" /> <thead id="tabhead" style="position: absolute;width:100%; top:0px;background-color:lightblue;"> <tr style=""> <th colspan="2" style="width: 210px;"><input type="checkbox" class="chbAll" checked="checked">课程</th> <th style="width:70px;">总分</th> <th style="width: 70px;">总分排名</th> <th style="width: 70px;">平均分</th> <th style="width: 80px;">平均分排名</th> <th style="width: 80px;"> <input type="checkbox" class="chbKC" checked="checked">数学<br>百分制</th> <th style="width: 80px;"> <input type="checkbox" class="chbKC" checked="checked">语文<br>等级制</th> </tr> </thead> <tbody> <tr> <td>---</td> <td>---</td> <td>---</td> <td>---</td> <td>---</td> <td>---</td> <td>---</td> <td>---</td> </tr> </tbody> </table>
</div> </body>
只用几行js,加几个css样式。不用贴层或改动表结构。(测试时请多加几行tr)
结果如图:上下滚动,thead不动;左右滚动,thead跟随移动
分析:
将thead 设为absolute定位,使之脱离文档流,再获取垂直滚动条距离顶部的滚动距离,作为thead 的top位置,并实时同步。
问题一:thead 脱离文档流后,超出tabdiv不会隐藏,且tbody上部会被遮挡。
解决:1,将tabdiv设为relative或absolute定位;2,为table加上上边距来抵消thead的高度,margin-top:50px;。
问题二:table超出div宽度后,tbody单元格会自动被压缩。
解决:table 样式加上table-layout: fixed; width: 100%;
并通过<col />元素来设置每列宽度。
问题三:thead超出div宽度后,thead单元格会自动被压缩,而tbody正常显示。
解决:js中直接将thead的宽度设为table的宽度,$("#tabhead").css("width", $("#MyTable").css("width"));