table表格長度超出屏幕范圍，可滑動

 

步驟：

1、將table表格用div標簽包裹起來

2、設置div的style="overflow:auto;width:100%"

3、設置table的style="white-space:nowrap"

<template>
  <div>
    <div class="container">
      <p>整體情況<van-button type="primary" @click="toExcel()">導出為Excel</van-button></p>
      <div style="overflow:auto;width:100%">
         <table border="2" class="tabStyle">
             <tr>
                 <th>部門名稱</th>
                 <th>已對接證件類型數</th>
                 <th>待對接證件類型數</th>
                 <th>本月入庫證件數</th>
                 <th>累計入庫證件數</th>
                 <th>累計質檢入庫率</th>
             </tr>
             <tr>
                 <td>111111111111</td>
                 <td>2</td>
                 <td>3</td>
                 <td>4</td>
                 <td>5</td>
                 <td>6</td>
             </tr>
         </table>
      </div>
      <a id="forExport" style="visibility: hidden" href="#"></a>
    </div>
    </div>
  </div>
</template>
<script>
</script>
<style scoped lang="less">
  .container{
    .tabStyle {
      white-space:nowrap;
      tr {
        font-size: 10px;
        th {
          height: 40px;
          text-align: center;
          padding: 0 10px;
        }
        td {
          height: 40px;
          text-align: center;
        }
      }
      .secTable {
        th {
          padding: 0 10px;
        }
        td {
          padding: 0 10px;
        }
      }
      .lastTable {
        th {
          width: 130px;
        }
        td {
          width: 130px;
        }
      }
    }
  }
}
</style>

 

展示結果：超出屏幕寬度時，表格是可以在可視范圍中移動的