使用 colgroup标签实现表头表尾固定，中间内容自适应

话不多说，直接上代码：

 <table style="width: 99%;borderTop:1px solid #000;borderLeft:1px solid #000">
            <colgroup>
                <col width='3%'>
                <col width='8%'>
                <col width='8%'>
                <col width='8%'>
                <col width='7%'>
                <col width='8%'>
                <col width='10'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='8%'>
            </colgroup>
            <thead style="height: 30px;font-weight: bold;" id="header">
              <tr>
                <th >序号</th>
                <th >合同号</th>
                <th >计划单号</th>
                <th >车号</th>
                <th >产线</th>
                <th >牌号</th>
                <th >规格</th>
                <th >件数</th>
                <th >拟报结算量</th>
                <th >结算基准价</th>
                <th >下浮</th>
                <th >钢种加价</th>
                <th >规格加价</th>
                <th >其他加价</th>
                <th >拟报结算价</th>
                <th >金额</th>
              </tr>
            </thead>
          </table>
          <!-- 中间表格 -->
          <div style="width:100%;height:500px;overflow:auto">
            <table border="1" style="width:100%;borderTop:0">
              <colgroup>
                <col width='3%'>
                <col width='8%'>
                <col width='8%'>
                <col width='8%'>
                <col width='7%'>
                <col width='8%'>
                <col width='10'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='8%'>
              </colgroup>
              <tbody id="tbody">
                <tr v-for="(item) in lineData" :key="item.id" style="height: 25px">
                  <td>{{ item.index }}</td>
                  <td>{{ item.contract_no }}</td>
                  <td>{{ item.plan_no }}</td>
                  <td>{{ item.car_no }}</td>
                  <td>{{ item.product_line }}</td>
                  <td>{{ item.steel_no }}</td>
                  <td>{{ item.spec }}</td>
                  <td>{{ item.number }}</td>
                  <td>{{ item.accounts_weight }}</td>
                  <td @click="pageto(item.online_amount,item.price_id)" :class="{'style':item.online_amount !== null && item.index !== '合计'}">{{ item.online_amount }}</td>
                  <td>{{ item.low }}</td>
                  <td>{{ item.steel_amount }}</td>
                  <td>{{ item.spec_amount }}</td>
                  <td>{{ item.other_amount }}</td>
                  <td @click="pageto(item.accounts_amount,item.price_id)" :class="{'style':item.accounts_amount !== null && item.index !== '合计'}">{{ item.accounts_amount }}</td>
                  <td>{{ item.amount }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 尾部表格 -->
          <table style="width: 99%;borderTop:1px solid #000;borderLeft:1px solid #000">
            <colgroup>
                <col width='3%'>
                <col width='8%'>
                <col width='8%'>
                <col width='8%'>
                <col width='7%'>
                <col width='8%'>
                <col width='10'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='5%'>
                <col width='8%'>
            </colgroup>
            <thead style="height: 30px;font-weight: bold;" id="header">
              <tr>
                <th>合计</th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th>{{ accounts_weight }}</th>
                <th>{{ online_amount }}</th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th>{{ accounts_amount }}</th>
                <th>{{ amount }}</th>
              </tr>
            </thead>
          </table>