使用css固定table表头

Erwin

发布于 2020-12-15 12:00:24

2K0

发布于 2020-12-15 12:00:24

文章被收录于专栏：啸天"s blog

前言

最近有个需求,渲染一个很复杂的table表格,不能用框架实现,使用原生table数据量一大就看不到表头需要固定表头,本篇文章当备份吧

代码

<html lang="zh-CN" class=""><head>

    <meta charset="UTF-8">
    <title>CodePen Demo</title>

    <style>
  .table-container {
    width: 50%;
    height: 200px;
    border: solid 1px #cccccc;
    margin: 10px auto;
    background: #FFF;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    padding-top: 50px;
    overflow: hidden;
  }

  .table-container-inner {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
  }

  .table-header-fixed {
    width: 100%;
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
  }

  th, td, span {
    text-align: left;
  }

  th span {
    position: absolute;
    top: 0;
    width: 100%;
    display: block;
    line-height: 50px;
    border-left: solid 1px #3a84ac;
    border-bottom: solid 1px #cccccc;
    padding-left: 5px;
    margin-left: -5px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #FFF;
    background: #549DC5;
  }

    </style>

  </head>

  <body>
    <div class="container" role="main">
    <center>
      <h1>CSS - Fixed Header With Variable Width Table</h1>
    </center>
    <div class="table-container">
      <div class="table-container-inner">
        <table class="table-header-fixed">
          <thead>
            <tr>
              <th>
                <span>First</span>
              </th>
              <th>
                <span>Second</span>
              </th>
              <th>
                <span>Third</span>
              </th>
              <th>
                <span>Forth</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second222222222222222222222222222</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
            <tr>
              <td  data-col="first">First</td>
              <td  data-col="second">Second</td>
              <td  data-col="third">Third</td>
              <td  data-col="third">Forth</td>
            </tr>
          </tbody>
        </table>
      </div><!-- /fixed-table-container-inner -->
    </div><!-- /fixed-table-container -->
  </div><!-- /container -->

  </html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-12-11，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染