HTML table标签实现表头固定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div>
      <table cellspacing="0" border="0" cellpadding="0">
        <thead>
          <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
          <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
<style>
  div {
    overflow: auto;
     400px;
    height: 290px;
    /* 固定高度 */
    border: 1px solid gray;
    border-bottom: 0;
    border-right: 0;
  }

  td,
  th {
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
     100px;
    height: 30px;
    box-sizing: border-box;
  }

  th {
    background-color: lightblue;
  }

  table {
    border-collapse: separate;
    table-layout: fixed;
     100%;
    /* 固定寬度 */
  }

  td:first-child,
  th:first-child {
    position: sticky;
    left: 0;
    /* 首行在左 */
    z-index: 1;
    background-color: lightpink;
  }

  thead tr th {
    position: sticky;
    top: 0;
    /* 第一列最上 */
  }

  th:first-child {
    z-index: 2;
    background-color: lightblue;
  }
</style>

在这里插入图片描述

【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处！
【重要说明】本文为本菜鸟的学习记录,论点和观点仅代表个人不代表此技术的真理,目的是学习和可能成为向别人分享的经验,因此有错误会虚心接受改正,但不代表此时博文无误!
【博客园地址】JayveeWong： http://www.cnblogs.com/wjw1014
【CSDN地址】JayveeWong： https://blog.csdn.net/weixin_42776111
【Gitee地址】Jayvee：https://gitee.com/wjw1014
【GitHub地址】Jayvee：https://github.com/wjw1014