HTML原生table固定表头和列

傑丶
17,626 阅读3分钟

1 步骤分析

1.1 为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。

table {
 table-layout: fixed;
 width: 100%;
}

1.2 固定表头

固定表格则需要使用到 position : sticky 的设定。 sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。 要注意的是当position : sticky 应用于 table，只能作用于<th>和<td>，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果

thead tr th {
 position:sticky;
 top:0;
}

1.3 固定左侧列

在第一列 th 和 td 元素中加上下方样式即可：

position: sticky;
left: 0;

1.4 实际效果展示：

table.gif

2 demo代码

2.1 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="table_detail_wrapper">
      <table class="table">
        <thead>
          <tr>
            <th>我是固定的表头</th>
            <th>我是固定的表头</th>
            <th>我是固定的表头</th>
            <th>我是固定的表头</th>
            <th>我是固定的表头</th>
          </tr>
        </thead>
        <tbody>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
          <tr class="tr-row">
            <td class="td-column td--column--1">我是固定的列</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
            <td class="td-column">我是td中的内容</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

2.2 scss

  .table_detail_wrapper {
    height: 586px;
    position: relative;
    width: 800px;
    overflow: auto;

    .table {
      border: 1px solid #808080;
      color: #fff;
      border-collapse: collapse;
      background-color: #000;
      table-layout: fixed;
      width: 100%;
      // height: 100%;
      // overflow-x: auto;

      thead {
        text-align: center;
        tr {
          // height: 50px;
          th {
            border: 1px solid #757575;
            font-weight: 400;
            padding: 0;
            width: 200px;
            box-sizing: border-box;
            height: 50px;

            position: sticky;
            top: -1px;
            background-color: #000;
            &:first-child {
              position: sticky;
              left: -1px;
              z-index: 999;
            }
          }
        }
      }

      tbody {
        text-align: center;
        // height: 536px;

        tr {
          height: 47px;
          &:nth-child(2n + 1) {
            td {
              background-color: #2e2e2e;
            }
          }
          &:nth-child(2n + 2) {
            td {
              background-color: #000;
            }
          }
          td {
            border: 1px solid #757575;
            width: 78px;
            box-sizing: border-box;
            height: 47px;
            &.alarm_td {
              width: 720px;
            }
            &.td--column--1 {
              position: sticky;
              left: -1px;
            }
          }
        }
      }
    }

  }
avatar
文章
阅读
粉丝