HTML <table>中<thead>固定不动，<tbody>滚动条

最新推荐文章于 2024-07-29 09:26:52 发布

闪亮的路灯

最新推荐文章于 2024-07-29 09:26:52 发布

阅读量3.2k

点赞数

分类专栏： HTML 文章标签： HTML table

本文链接：https://blog.csdn.net/weixin_41377740/article/details/84291849

版权

HTML 专栏收录该内容

0 篇文章 1 订阅

订阅专栏

原结构为一个table 放在一个 div中，在div设置overflow-y


    <div style="overflow-y: auto;">
      <table class="footable foottable_tab">
        <thead>
            <tr bgcolor="#fafafa">
                <th width="60">选择</th>
                <th width="100">模板名称</th>
                <th width="100">模板类型</th>
                <th width="100">创建时间</th>
                <th width="400">参数说明</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td width="60" align="center"><input type="checkbox" id="checkbox" name="choose" value=""></td>
                                    <td width="100" align="center">正常还款</td>
            <td width="100" align="center">BatPro</td>
            <td width="100" align="center">2016-09-26</td>
            <td width="400" align="center">aaaaaaaaaa</td>
          </tr>
          <tr>
            <td width="60" align="center"><input type="checkbox" id="checkbox" name="choose" value=""></td>
                                    <td width="100" align="center">正常还款</td>
            <td width="100" align="center">BatPro</td>
            <td width="100" align="center">2016-09-26</td>
            <td width="400" align="center">aaaaaaaaaa</td>
          </tr>
        </tbody>
      </table>
    </div>

上变这种结构右侧滚筒条在容器div 上，这时拖动滚动条整个table都会动，标题也会消失

这时我们将table中的thead和tbody分到两个容器中，通过控制td宽度做上下对齐

代码如下：
标题
    <div  style="background:#EAEAEA;padding-right:17px">
      <table class="footable foottable_tab">
        <thead>
            <tr bgcolor="#fafafa">
                <th width="60">选择</th>
                <th width="100">模板名称</th>
                <th width="100">模板类型</th>
                <th width="100">创建时间</th>
                <th width="400">参数说明</th>
            </tr>
        </thead>
      </table>
    </div>
    <div style="width:100%;height:200px;overflow:auto; border-bottom:1px solid #dddddd">
      <table id="Template_listZ" class="footable foottable_tab" >
        <tbody id="tplWrapper_TemplateZ">
          <tr>
            <td width="60" align="center"><input type="checkbox" id="checkbox" name="choose" value=""></td>
                                    <td width="100" align="center">正常还款</td>
            <td width="100" align="center">BatPro</td>
            <td width="100" align="center">2016-09-26</td>
            <td width="400" align="center">aaaaaaaaaa</td>
          </tr>
          <tr>
            <td width="60" align="center"><input type="checkbox" id="checkbox" name="choose" value=""></td>
                                    <td width="100" align="center">正常还款</td>
            <td width="100" align="center">BatPro</td>
            <td width="100" align="center">2016-09-26</td>
            <td width="400" align="center">aaaaaaaaaa</td>
          </tr>
        </tbody>
      </table>
    </div>