HTML table标签实现表头固定

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;
    width: 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;
    width: 100px;
    height: 30px;
    box-sizing: border-box;
  }

  th {
    background-color: lightblue;
  }

  table {
    border-collapse: separate;
    table-layout: fixed;
    width: 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>

在这里插入图片描述

posted @ 2021-06-09 16:26  叫我+V  阅读(913)  评论(0)  编辑  收藏  举报