表格內部添加滾動條（表頭不動，表體動）

table-layout:fixed;固定了列寬度，讓所有的列平均分配總寬

也就會有長的內容會顯示不全，那么可以用white-space:normal;來進行換行

 方法1：

1、表格給的是固定高度（模態框），當超過這個高度時滾動條就開始滾動；

2、表頭寬度為（100%-滾動條寬度）時，表頭和表體的總寬度才會相等，表體和表頭的列寬一一對應（table-layout:fixed;  讓所有列平均分配總寬）

3、此時表頭若加了width，表體相應的那一列也應該給相同的寬度，（表體的寬不再隨着表頭的寬動）

3、當設置表頭寬度為（100% - 1em）時，就會空出一塊，這一小塊可以用背景顏色填滿~~~

<div class="titleDiv table_out">
  <table class="table tableTop table-hover">
    <thead>
        <tr class="tableTh">
          <!--<th>選擇</th>-->
          <th style="width:20%;">用戶登錄賬戶</th>
          <th style="width: 110px;">用戶名稱</th>
          <th style="">所屬機構</th>
          <th>用戶類型</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let item2 of Details;" class="tableTd">
          <td style="width:20%;">{{item2.account}}</td>
          <td style="width: 110px;">{{item2.name}}</td>
          <td>{{item2.org_name}}</td>
          <td>{{convert(item2.vip)}}</td>
        </tr>
      </tbody>
    </table>
</div>

 

/*設置 tbody高度大於400px時 出現滾動條*/
    table tbody {
        display: block;
        height: 400px;
        overflow-y: scroll;
    }
    
    table thead, tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
/*滾動條默認寬度是16px 將thead的寬度減16px*/
    table thead {
        width: calc( 100% - 1em);
    }

 

 

方法2：

優點：適用於表格高度隨內容自適應，但超過某個最大高度時開始滾動，也同樣適用於方法一中的固定高度；

缺點：比較麻煩

 1、表格的父元素給固定高度，表格給最大高度，沒有超過這個最大高度時表格高度隨內容撐開，超過這個高度時就開始滾動（相對父元素的百分比）

（注：也可以像方法一中給表格設置固定高度400，當表格內容高度超過四百時開始滾動）

思路：

（1）有兩個table，第一個只有表頭，第二個有表頭和表體

（2）將表格和假表頭分別用div裝起來（false_table 和 out_scoll），在用最大外框div將這些內容裝起來（div-out-height）；

（3）將真表的表頭display:none，假表頭向左浮動，並給相應間距，讓它覆蓋在真表頭原來的位置上；

（4）假表頭的寬度為（100% - 滾動條寬度），讓表體和假表頭的總寬相等

（5）表體的寬度要和假表頭的寬度一一對應

/* 最外框外框 無滾動條 */
.div-out-height {
  border: 1px solid #eee;
  border-radius: 3px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  height: calc(100% - 65px);
}
/* 假表頭 */
.false_table{
    width: 100%;
    float: left;
    border-top: 2px solid #3bb8f6;
    background-color: #f0f9ff;
}
/* 假表頭寬度為（100% - 滾動條寬度）*/
.false_table table{
    margin: 0;
    width: calc(100% - 19px);
}
/* 表格滾動條 */
.out_scoll {
  overflow: scroll;
  overflow-x: hidden;
  clear: both;
  max-height: calc(100% - 150px);  /* 給有滾動條的框加最大高度，超過這個高度就開始滾動 */
}
/* 隱藏真表頭 */
.out_scoll thead{
  display: none!important;
}

<div class="div-out-height">
    <p class="table-title">角色分配列表:</p>
    <!-- 假表頭 -->
    <div class="false_table">
      <table class="table">
        <thead> 
          <tr class="tableTh">
            <th style="width: 55px">序號</th><!-- 表體給了相應寬度，假表頭也要給相同寬度 -->
            <th>角色編號</th>
            <th>角色名稱</th>
            <th>角色描述</th>
          </tr>
        </thead>
      </table>
    </div>
    <!-- 真表 -->
    <div class="out_scoll">
      <table class="table table-hover">
        <thead> 
          <tr class="tableTh">
            <th>序號</th>
            <th>角色編號</th>
            <th>角色名稱</th>
            <th>角色描述</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of Roledata;let i = index" class="tableTd">
            <td style="width: 55px">{{i+1}}</td>
            <td>{{ShowString(item.roleid)}}</td>
            <td>{{ShowString(item.role_name)}}</td>
            <td>{{Showdigital(item.cnt)}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <page [pageParams]="pageParam" (changePageSize)="changePageSize($event)" (changeCurPage)="getPageData($event)"></page>
</div>

 

 

圖1：當每頁顯示10條時

圖2：當每頁顯示30條時