表格中表头固定表体出现滚动条

在表格当中如果内容太多的情况下可以选择让表格带滚动条，但是如果直接在table中添加的话会表头也跟着一起滚动，可以通过写两个table标签来实现这种情况，但是这种情况必须手动控制每个列的宽度

 <div class="box-table" >
            <table>
              <div style="position: absolute;left: 15px;top: 57px;">
                <table>
                  <thead class="th">
                    <tr>
                      <th><div>1</div></th>
                      <th><div>2</div></th>
                      <th><div>3</div></th>
                      <th><div>4</div></th>
                      <th><div>5</div></th>
                      <th><div>6</div> </th>
                      <th><div>7</div></th>
                      <th><div>8</div></th>
                      <th><div>9</div></th>
                      <th><div>10</div></th>
                    </tr>
                  </thead> 
                </table>
              </div>
              <div style="margin-top: 72px;height: 323px;overflow: auto;width: 100%;">
                <table>
                  <tbody class="t-body">
                    <tr v-for="(list,index) in 100" :key="index" class="tbody_tr">
                      <td><div>1</div></td>
                      <td><div>2</div></td>
                      <td><div>3</div></td>
                      <td><div>4</div></td>
                      <td><div>5</div></td>
                      <td><div>6</div></td>
                      <td><div>7</div></td>
                      <td><div>8</div> </td>
                      <td><div>9</div></td>
                      <td><div>10</div></td>  
                    </tr>   
                  </tbody> 
                </table>
              </div>
            </table>
          </div>

这种方法没有兼容性问题，但是不能自动的根据内容显示宽度，只能自定义控制宽度