HTML table标签实现表头固定

我是ed.

已于 2024-01-03 10:33:39 修改

阅读量1.9k

点赞数 4

分类专栏： Vue2 相关 HTML 相关 CSS 相关文章标签： html 前端 javascript

于 2021-06-09 16:25:06 首次发布

本文链接：https://blog.csdn.net/weixin_42776111/article/details/117746965

版权

Vue2 相关同时被 3 个专栏收录

157 篇文章 23 订阅

订阅专栏

HTML 相关

17 篇文章 0 订阅

订阅专栏

CSS 相关

10 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述

我是ed.

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML table标签实现表头固定

HTML table标签实现表头固定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <table cellspacing="0" border="0" cellpadding="0"> <
复制链接

扫一扫