使用CSS的固定表格标题 [英] Fixed Table Header using CSS

查看：80
本文介绍了使用CSS的固定表格标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在顶部显示 thead ?我尝试了以下脚本，但没有 固定在滚动上.

How to have a fix thead at the top? I tried the below script but it didn't fixed on scrolling.

thead {
  position: sticky;
  top: 0;
  background: khaki;
  color: white;
}

<table class="table table-striped table-hover table-bordered text-center">
  <thead>
    <tr>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
    </tr>
    <tr>
      <th>gfdg</th>
      <th>gdrgr</th>
      <th>segsre</th>
      <th>gfrdg</th>
      <th>srgdr</th>
      <th>egrsdg</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
  </tbody>
</table>

如何在顶部使用修补程序 thead ?我尝试了上面的脚本，但没有 固定在滚动上.

How to have a fix thead at the top? I tried the above script but it didn't fixed on scrolling.

推荐答案

无法操纵thead元素.仅th个元素.

It is impossible to manipulate thead element. Only elements of th individually.

thead tr:first-child th {
  position: sticky;
  top: 0;
}

thead th {
  position: sticky;
  top: 20px;
  background: khaki;
  color: white;
}

<table class="table table-striped table-hover table-bordered text-center">
  <thead>
    <tr>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
    </tr>
    <tr>
      <th>gfdg</th>
      <th>gdrgr</th>
      <th>segsre</th>
      <th>gfrdg</th>
      <th>srgdr</th>
      <th>egrsdg</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
  </tbody>
</table>

或将两个tr合并为一个.

Or add the two tr into one.

<thead>
  <tr>
    <th>
      <input class="form-control" id="myInput" type="text" placeholder="Search..">
      <div>gfdg</div>
    </th>
    ...

然后只有这种样式就足够了.

And then only this style is enough.

thead th {
  position: sticky;
  top: 0;
  background: khaki;
  color: white;
}

这篇关于使用CSS的固定表格标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆