关于bootstrap:bootstrapvue-固定表头

性能场景: 固定表头的地位不在浏览器顶端

办法一：

反对表中有合并单元格的状况下 兼容多个浏览器（包含 ie）

实现逻辑通过定义两个 table 来实现

一个 table 只有 thead
一个 table 只有 tbody

> vue
    <div class="table-head">
        <b-table-simple fixed bordered>
            <colgroup>
              <col style="width:11%;" />
              <col style="width:19%;" />
              <col style="width:6%;" />
              <col style="width:7%;" />
            </colgroup>
            <colgroup>
              <col style="width:8%;" />
              <col style="width:8%;" />
              <col style="width:9%;" />
              <col style="width:8%;" />
              <col style="width:8%;" />
              <col style="width:8%;" />
              <col style="width:8%;" />
            </colgroup>
          <b-thead head-variant="dark" class="text-center">
            <b-tr>
              <b-th rowspan="2"> 第一行表头 1 </b-th>
              <b-th rowspan="2"> 第一行表头 2 </b-th>
              <b-th rowspan="2"> 第一行表头 3 </b-th>
              <b-th rowspan="2"> 第一行表头 4 </b-th>
              <b-th colspan="7"> 第一行表头 5 </b-th>
            </b-tr>
            <b-tr>
              <b-th> 第二行表头 1 </b-th>
              <b-th> 第二行表头 2 </b-th>
              <b-th> 第二行表头 3 </b-th>
              <b-th> 第二行表头 4 </b-th>
              <b-th> 第二行表头 5 </b-th>
              <b-th> 第二行表头 6 </b-th>
              <b-th> 第二行表头 7 </b-th>
            </b-tr>
          </b-thead>
        </b-table-simple>
      </div>
      <div class="table-body">
        <b-table-simple fixed striped bordered>
            <colgroup>
              <col style="width:11%;" />
              <col style="width:19%;" />
              <col style="width:6%;" />
              <col style="width:7%;" />
            </colgroup>
            <colgroup>
              <col style="width:8%;" />
              <col style="width:8%;" />
              <col style="width:9%;" />
              <col style="width:8%;" />
              <col style="width:8%;" />
              <col style="width:8%;" />
              <col style="width:8%;" />
            </colgroup>
          <b-tbody>
            <template v-for="(item,i) in items">
              <b-tr :key="i +'odd'">
                <b-td rowspan="2" style="height:58px;"> 内容 1 </b-td>
                <b-td style="height:29px;"> 内容 2 </b-td>
                <b-td class="text-center" style="height:29px;"> 内容 3 </b-td>
                <b-td class="text-right" style="height:29px;"> 内容 4 </b-td>
                <b-td class="text-right" style="height:29px;"> 内容 5 </b-td>
                <b-td class="text-right" style="height:29px;"> 内容 6 </b-td>
                <b-td class="text-right" style="height:29px;background-color:#FFEBD9;">
                 内容 7
                </b-td>
                <b-td class="text-right" style="height:29px;"> 内容 8 </b-td>
                <b-td class="text-right" style="height:29px;"> 内容 9 </b-td>
                <b-td class="text-right" style="height:29px;"> 内容 10</b-td>
                <b-td class="text-right" style="height:29px;"> 内容 11</b-td>
              </b-tr>
              <b-tr :key="i +'even'">
                <b-td style="height:29px;"> 内容 12</b-td>
                <b-td class="text-center" style="height:29px;"> 内容 13</b-td>
                <b-td class="text-right" style="height:29px;"> 内容 14</b-td>
                <b-td class="text-right" style="height:29px;"> 内容 15</b-td>
                <b-td class="text-right" style="height:29px;"> 内容 16</b-td>
                <b-td class="text-right" style="height:29px;background-color:#FFEBD9;">
                  <b> 内容 17</b>
                </b-td>
                <b-td class="text-right" style="height:29px;"> 内容 18</b-td>
                <b-td class="text-right" style="height:29px;"> 内容 19</b-td>
                <b-td class="text-right" style="height:29px;"> 内容 20</b-td>
                <b-td class="text-right" style="height:29px;"> 内容 21</b-td>
              </b-tr>
            </template>
          </b-tbody>
        </b-table-simple>
      </div>
> css
    .table-head {
        .table-bordered {border-bottom-width: 2px;}
    }
    .table-body {
        margin-top: -17px;
        @media (min-width: 768px) {max-height: 650px;}
        @media (min-width: 1024px) {max-height: 350px;}
        &::-webkit-scrollbar {display: none;}
        -ms-overflow-style: none;
        overflow-y: auto;
        .table-bordered {border-top-width: 0px;}
    }

通过标签 <colgroup> 能够调整单元格的大小

办法二：

更新中