固定表格表头：使用CSS实现class='tt'列固定

<template>
  <div class='brand-partyHistory'>
    <table>
      <thead class='tt'>
        <tr>
          <th class='base-th' style='width: 167px'>支部名称</th>
          <th class='base-th' style='width: 200px'>类型</th>
          <th class='base-th' style='width: 116px'>一月</th>
          <th class='base-th' style='width: 116px'>二月</th>
          <th class='base-th' style='width: 116px'>三月</th>
          <th class='base-th' style='width: 116px'>四月</th>
          <th class='base-th' style='width: 116px'>五月</th>
          <th class='base-th' style='width: 116px'>六月</th>
          <th class='base-th' style='width: 116px'>七月</th>
          <th class='base-th' style='width: 116px'>8月</th>
          <th class='base-th' style='width: 116px'>9月</th>
          <th class='base-th' style='width: 116px'>10月</th>
          <th class='base-th' style='width: 116px'>11月</th>
          <th class='base-th' style='width: 116px'>12月</th>
        </tr>
      </thead>
      <tbody>
        <!-- 表格内容 -->
      </tbody>
    </table>
  </div>
</template>
<script>
  export default {}
</script>
<style lang='scss' scoped>
.brand-partyHistory {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  table {
    border-collapse: collapse;
    width: 100%;
    thead {
      tr {
        width: 100%;
        .base-th {
          height: 50px;
          color: #333333;
          font-size: 14px;
          font-weight: 700;
          border: 1px solid #dfd6d6;
          background-color: #fffbfb;
        }
      }
    }
    tbody {
      overflow-y: auto;
      tr {
        width: 100%;
        td {
          height: 50px;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          border: 1px solid #dfd6d6;
        }
      }
    }
  }
  .tt {
    position: sticky;
    top: 0;
  }
}
</style>
<p>可以使用CSS的position属性来实现固定某栏。首先，为class为'tt'的th元素添加一个position: sticky的样式，并设置top属性为0，使其固定在顶部：</p>
<pre><code class="language-css">.tt {
  position: sticky;
  top: 0;
}
</code></pre>
<p>然后，由于表格的父元素.brand-partyHistory具有overflow-y: auto的样式，需要设置其position为relative，以便让固定的列相对于该父元素进行定位：</p>
<pre><code class="language-css">.brand-partyHistory {
  position: relative;
}
</code></pre>
<p>这样，class为'tt'的列就会在滚动时保持固定。完整的代码如下：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div class='brand-partyHistory'&gt;
    &lt;table&gt;
      &lt;thead class='tt'&gt;
        &lt;tr&gt;
          &lt;th class='base-th' style='width: 167px'&gt;支部名称&lt;/th&gt;
          &lt;th class='base-th' style='width: 200px'&gt;类型&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;一月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;二月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;三月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;四月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;五月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;六月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;七月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;8月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;9月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;10月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;11月&lt;/th&gt;
          &lt;th class='base-th' style='width: 116px'&gt;12月&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;!-- 表格内容 --&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {}
&lt;/script&gt;

&lt;style lang='scss' scoped&gt;
.brand-partyHistory {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  table {
    border-collapse: collapse;
    width: 100%;
    thead {
      tr {
        width: 100%;
        .base-th {
          height: 50px;
          color: #333333;
          font-size: 14px;
          font-weight: 700;
          border: 1px solid #dfd6d6;
          background-color: #fffbfb;
        }
      }
    }
    tbody {
      overflow-y: auto;
      tr {
        width: 100%;
        td {
          height: 50px;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          border: 1px solid #dfd6d6;
        }
      }
    }
  }
  .tt {
    position: sticky;
    top: 0;
  }
}
&lt;/style&gt;
</code></pre>