vue+vue-seamless-scroll双表格滚动展示，固定头部

最新推荐文章于 2024-05-24 08:30:00 发布

陈不知代码

最新推荐文章于 2024-05-24 08:30:00 发布

阅读量1.4k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/CHENC0518/article/details/129794706

版权

1.由于需要整个table进行滚动，所以用单表格会出现整个滚动，或者出现头部与body对不齐的情况。

2.对于以上情况，我们需要用到双表格。

3.很容易理解，即利用两个表格，隐藏第一个表格的头部，隐藏第二个表格的内容部分，即可实现表格滚动，固定头部，而且头部与内容也是对齐的了。

<table class="one_table">
            <thead class="table_title one_head">
              <tr class="table_title_th">
                <th>xxxxx</th>
                <th>xxx</th>
                <th>xxxx</th>
                <th>xxxx</th>
                <th>xxxx</th>
                <th>xxxx</th>
                <th>xxx</th>
                <th>xxxxx</th>
              </tr>
            </thead>
          </table>
          <vue-seamless-scroll
            :data="List"
            :class-option="optionHover"
            class="seamless-warp"
          >
            <table class="one_table">
             <thead class="table_title tow_head">
              <tr class="table_title_th">
                <th>xxxxx</th>
                <th>xxx</th>
                <th>xxxx</th>
                <th>xxxx</th>
                <th>xxxx</th>
                <th>xxxx</th>
                <th>xxx</th>
                <th>xxxxx</th>
              </tr>
            </thead>
               <tbody class="table_content tow_body">
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
            </table>
          </vue-seamless-scroll>

4.具体样式可以自己写了，只需要隐藏第一个表格内容部分，第二个表格头部，用display:none；