zoukankan      html  css  js  c++  java
  • table表格长度超出屏幕范围,可滑动

    步骤:

    1、将table表格用div标签包裹起来

    2、设置div的style="overflow:auto;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;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>

    展示结果:超出屏幕宽度时,表格是可以在可视范围中移动的

      

  • 相关阅读:
    Go Revel
    Go Revel
    Go Revel
    Go Revel
    deployment:声明式的升级应用
    Kubernetes架构及相关服务详解
    Docker 安装MySQL
    日志收集-Elk6
    Jenkins-Multijob plugin多任务串并行
    ansible创建vmware虚拟机
  • 原文地址:https://www.cnblogs.com/ibear/p/14792607.html
Copyright © 2011-2022 走看看