table加橫向滾動條並修改滾動條樣式

 

 

 需要在table外加一個div（注：修改滾動條樣式的內容不支持ie）

.unifiedContractTextBox {
    width: 100%;
    overflow-x: auto;

    table{
      width: 100%;
      border-collapse: collapse;

      td{
        line-height: 23px;
        text-align: center;
        padding: 10px 10px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
      }
      .table_title{
        background: #F5F7FA;
        color: #909399;
        font-weight: bold;
        min-width: 20%;
      }
      .td_content ,.td_title_content{
        color: #606266;
        /*display: inline-block;
        max-width: 200px;*/
      }
      .td_title_content{
        text-align: left;
      }
    }
  }
  .unifiedContractTextBox::-webkit-scrollbar {width:8px; height:8px; background-color:transparent;} /*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
  .unifiedContractTextBox::-webkit-scrollbar-track {background-color:transparent;  } /*定義滾動條軌道 內陰影+圓角*/
  .unifiedContractTextBox::-webkit-scrollbar-thumb {background-color:rgb(221,222,224); border-radius:6px;} /*定義滑塊 內陰影+圓角*/