性能场景: 固定表头的地位不在浏览器顶端
办法一：
反对表中有合并单元格的状况下 兼容多个浏览器（包含 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> 能够调整单元格的大小
办法二：
更新中