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;} /*定义滑块 内阴影+圆角*/