背景

我的项目须要用表格展现数据，要求表头和右边两列可能在滚动的时候固定，思考到目前开源的table组件库冗余了太多我的项目不须要的性能，其次也是为了避免数据过多的时候渲染太慢，于是决定用html和css实现。

性能

  1. 表头固定
  2. 右边两类固定
  3. 高度要自适应（table默认反对）

思路

应用table的table-layout: fixed属性设置固定列宽，这样能力在左右滚动时计算出偏移量。联合css的position:sticky属性，设置第一行和左右两列粘性定位，其中第二列的偏移量依据第一列的宽度决定，以此类推，如果有三列固定，须要晓得前两列的宽度。

table-layout: fixed依据MDN的形容，table-layout用于定义了用于布局表格单元格，行和列的算法，fixed属性值用于示意某一列的宽度仅由该列首行的单元格决定。因而，该单元格所在行之后的行并不会影响整个列宽。

代码实现

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .table{      overflow:auto;      width:400px;      height:300px; /* 固定高度 */      border:1px solid #999;      border-bottom: 0;      border-right: 0;    }    table {      border-collapse:separate;      table-layout: fixed;      width: 100%; /* 固定寬度 */    }    td, th {      border-right :1px solid #999;      border-bottom :1px solid #999;      box-sizing: border-box;      /* 单元格宽高 */      width:100px;      height:30px;    }    th {      background-color:lightblue;    }    /* 管制右边固定的外围代码 */    td:nth-child(1),    th:nth-child(1) {      position:sticky;      left:0; /* 首行在左 */      z-index:1;      background-color:lightpink;    }    td:nth-child(2),    th:nth-child(2) {      position:sticky;      left:100px;      z-index:1;      background-color:lightpink;    }    /* 管制表头固定的外围代码 */    thead tr th {      position:sticky;      top:0; /* 第一列最上 */    }    th:nth-child(1),    th:nth-child(2){      z-index:2;      background-color:lightblue;    }  </style></head><body><div class="table">  <table cellspacing="0" border="0" cellpadding="0">    <thead>    <tr>      <th>表头1</th>      <th>表头2</th>      <th>表头3</th>      <th>表头4</th>      <th>表头5</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>    <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>

效果图