table 固定表头备忘

方案1：使用一个table实现

优点：列可以自适应，无论如何也不会出现对不齐的风险

缺点：滚动条出现在了header区域，美中不足

使用了vue语法，但很容易看懂，自己改成纯HTML也可以

<table class="table-fixedHeader" cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>标题1</th>
          <th>标题2</th>
          <th>标题3</th>
          <th>标题4</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in new Array(100)">
          <td>{{index+1}}</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>

<style scoped>
  .table-fixedHeader {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    width: 100%;
    table-layout: fixed;
    --vetialBorder: 1px;
  }

  .table-fixedHeader thead {
    border-left: 1px solid #DFE2EB;
    border-top: 1px solid #DFE2EB;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .table-fixedHeader thead tr {
    height: 40px;
    line-height: 40px;
  }

  .table-fixedHeader thead tr>th {
    background-color: #fafafa;
    font-weight: bold;
    border-bottom: 1px solid #DFE2EB;
    border-right: var(--vetialBorder) solid #DFE2EB;
    color: #909399;
    text-align: center;
  }

  .table-fixedHeader thead tr>th>div {
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .table-fixedHeader tbody {
    border-left: 1px solid #DFE2EB;
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .table-fixedHeader tbody tr {
    height: 40px;
    line-height: 40px;
  }

  .table-fixedHeader tbody tr td {
    border-bottom: 1px solid #DFE2EB;
    border-right: var(--vetialBorder) solid #DFE2EB;
    text-align: center;
  }
</style>

 

方案2：使用两个table实现

优点：header部分不会出现滚动条

缺点：不设置列宽会对不齐，且须设置两遍，但仍然有在特殊情况下对不齐的风险

<div style="width: 800px;">
      <div class="table-head">
          <table>
              <colgroup>
                  <col style="width: 80px;background-color: red;" />
                  <col style="background-color: green;" />
              </colgroup>
              <thead>
                  <tr>
                      <th>序号</th>
                      <th>内容</th>
                  </tr>
              </thead>
          </table>
      </div>
      <div class="table-body">
          <table>
              <colgroup>
                  <col style="width: 80px;background-color: lightgreen;" />
                  <col style="background-color: blue;" />
              </colgroup>
              <tbody>
                  <tr>
                      <td>1</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>2</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>3</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>4</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>5</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>6</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>7</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>8</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>9</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>10</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>11</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>12</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>13</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>14</td>
                      <td>我只是用来测试的</td>
                  </tr>
                  <tr>
                      <td>15</td>
                      <td>我只是用来测试的</td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>

<style scoped>
  .table-head {
        padding-right: 17px;
        background-color: #999;
        color: #000;
    }

    .table-body {
        width: 100%;
        height: 300px;
        overflow-y: scroll;
    }

    .table-head table,
    .table-body table {
        width: 100%;
    }

    .table-body table tr:nth-child(2n+1) {
        background-color: #f2f2f2;
    }


  ::-webkit-scrollbar {
    width: 50px;
  }

  ::-webkit-scrollbar-track {
    background: #ededed;
  }

  ::-webkit-scrollbar-thumb {
    background-color: lightgray;
  }
</style>