---

前言

大家一定使用过很多UI，UI都自带的有一些简单的表头固定的功能，但有时候如果我们使用了动态表头数据的话可能会造成数据渲染速度慢影响数据正常显示，因此我们可以用原生table来完成这样的功能

---

一、表格数据

在这里设置4列数据为固定列，其他的数据就先for循环弄出来。
我们现在有5行数据，每行34列，后30个列为动态生成的数据。

<div class="container">
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
        <th v-for="i in 30">
          {{ i+i+i }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td v-for="d in 30">
          {{ d+d+d }}
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td v-for="d in 30">
          {{ d+d+d }}
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td v-for="d in 30">
          {{ d+d+d }}
        </td>
      </tr>
      <tr>
        <td>4</td>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td v-for="d in 30">
          {{ d+d+d }}
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td v-for="d in 30">
          {{ d+d+d }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

二、样式设计

1.表格与外层DIV样式

外层DIV限制了表格的宽与高，超出的部分要让其出现滚动条

.container {
    width: 600px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: scroll;
}

表格的样式就简单设计一下th和td的宽高字体居中

table{
      table-layout:fixed;
      border: none;
      border-collapse: collapse;
      background: white;
      text-align: center;
      thead{
        tr{
          color: white;
          height: 70px;
          th{
            background-color: #CCE8EB;
            min-width: 100px;
            position:-webkit-sticky; position:sticky;
            top:0;
            z-index: 3;
          }
        }
      }
      tbody{
        tr{
          height: 50px;
          color: green;
          td{
            min-width: 100px;
            position:-webkit-sticky; position:sticky;
          }
        }
      }
    }

2.固定表头的样式（重要）

这里我们来设置thead和tbody中tr中th和td的定位，覆盖上面的样式吧

thead{
   tr{
     color: white;
     height: 70px;
     th{
       background-color: #CCE8EB;
       min-width: 100px;
       position:-webkit-sticky; position:sticky;
       top:0;
       z-index: 3;
     }
     th:nth-of-type(1) {
       background-color: #269191;
       left:0;
       z-index:4;
     }
     th:nth-of-type(2){
       background-color: #269191;
       left:100px;
       z-index:4;
     }
     th:nth-of-type(3){
       background-color: #269191;
       left:200px;
       z-index:4;
     }
     th:nth-of-type(4){
       background-color: #269191;
       left:300px;
       z-index:4;
     }
   }
 }
 tbody{
   tr{
     height: 50px;
     color: green;
     td{
       min-width: 100px;
       position:-webkit-sticky; position:sticky;
     }
     td:nth-of-type(1){
       background-color: #CCE8EB;
       font-weight: bold;
       left: 0;
       z-index:3;
     }
     td:nth-of-type(2){
       background-color: #CCE8EB;
       left: 100px;
       z-index:3;
     }
     td:nth-of-type(3){
       background-color: #CCE8EB;
       left: 200px;
       z-index:3;
     }
     td:nth-of-type(4){
       background-color: #CCE8EB;
       box-shadow: 5px 5px 5px #0078A855;
       left: 300px;
       z-index:3;
     }
   }
 }

position:sticky:针对于滚动框的定位，在你需要定位标签中加入该样式

td:nth-of-type(4)是用来查找第几个td元素，然后里面分别针对right和top固定一下，因为每列width都是100，所以td的left每次都加100，而th的top一直都需要为0

---

看一下结果，向下移动后

向右移动后

---

总结

样式大家可以随意设置，虽然这个表头固定没什么用，但是在数据量过大时还是可以了解一下子的