扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
以下是通过样式表实现的固定表头和列的HTML代码
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>固定表头和列</title>
<style>... .FixedTitleRow {...}{ position: relative; top: expression(this.offsetParent.scrollTop); z-index: 10; background-color: #E6ECF0; } .FixedTitleColumn {...}{ position: relative; left: expression(this.parentElement.offsetParent.scrollLeft); } .FixedDataColumn {...}{ position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); background-color: #E6ECF0; } </style></head><body> <div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline; position: absolute; height: 200px;"> <table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0' style='table-layout: auto' bordercolor='lightgrey'> <tbody> <tr class="FixedTitleRow"> <td class="FixedTitleColumn"> ID0</td> <td class="FixedTitleColumn"> CK0</td> <td class="FixedTitleColumn"> Code0</td> <td class="FixedTitleColumn"> Descirption0</td> <td class="FixedTitleColumn"> TOL0</td> <td> XS0</td> <td class="FixedTitleColumn"> SS0</td> <td> MS0</td> <td> DS0</td> <td> BS0</td> <td> XL0</td> <td> ML0</td> <td> DL0</td> <td> EM0</td> <td> BM0</td> </tr> <tr> <td class="FixedDataColumn"> 88</td> <td class="FixedDataColumn"> 88</td> <td class="FixedDataColumn"> 88</td> <td class="FixedDataColumn"> 88</td> <td class="FixedDataColumn"> 88</td> <td> 22</td> <td> 22</td> <td> 22</td> <td> 22</td> <td> 22</td> <td> 22</td> <td> 22</td> <td> 22</td> <td> 22</td> <td> 22</td> </tr> <tr> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 1111</td> <td class="FixedDataColumn"> This is Test</td> <td class="FixedDataColumn"> 1</td> <td> 001</td> <td> 002</td> <td> 003</td> <td> 004</td> <td> 005</td> <td> 006</td> <td> 007</td> <td> 008</td> <td> 009</td> <td> 010</td> </tr> <tr> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 1111</td> <td class="FixedDataColumn"> This is Test</td> <td class="FixedDataColumn"> 1</td> <td> 001</td> <td> 002</td> <td> 003</td> <td> 004</td> <td> 005</td> <td> 006</td> <td> 007</td> <td> 008</td> <td> 009</td> <td> 010</td> </tr> <tr> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 111</td> <td class="FixedDataColumn"> 1111</td> <td class="FixedDataColumn"> This is Test</td> <td class="FixedDataColumn"> 1</td> <td> 001</td> <td> 002</td> <td> 003</td> <td> 004</td> <td> 005</td> <td> 006</td> <td> 007</td> <td> 008</td> <td> 009</td> <td> 010</td> </tr> </tbody> </table> </div></body></html>如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击｜2021世界人工智能大会
直击5G创新地带，就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020（Cloud）- 科技行者
京公网安备 11010802021500号