前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用css固定table表头

使用css固定table表头

作者头像
Erwin
发布2020-12-15 12:00:24
2K0
发布2020-12-15 12:00:24
举报
文章被收录于专栏:啸天"s blog

前言

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

代码

代码语言:javascript
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档