bootstrap-vue 固定表头

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

方法一：

支持表中有合并单元格的情况下 兼容多个浏览器（包括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>可以调整单元格的大小

方法二：

更新中