固定table的表头同时固定列
Posted 疯序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了固定table的表头同时固定列相关的知识，希望对你有一定的参考价值。
table表格是我们最常使用的数据显示一种形式，但有时候数据比较多的时候 就需要我们去固定表头，固定列。我这里用简单的css样式配合两句js脚本来实现，希望能够去帮到你。
<div class="tableContainer"> <div class="sideTable"> <span>产品小类</span> <div id="sideTable"> <table> <tr><td>奥瑞奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> <tr><td>奥瑞</td></tr> </table> </div> </div> <div class="tableContent"> <div id="kk"> <div id="fixedHeader"> <table> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> </table> </div> </div> <div id="tableContentTwo" @scroll="fixedData"> <table> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> </tr> <tr> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</td> <td>上海</td> <td>温州</td> <td>杭州</td> <td>南京</以上是关于固定table的表头同时固定列的主要内容，如果未能解决你的问题，请参考以下文章