DataTable設置水平滾動條後，表頭和行不對齊且出現空白解決方式

DataTable渲染表格時，表格中的數據長度太長，表格數據撐到右邊後，看不到全部數據，所以想到增加一個水平滾動條解決此問題，確實增加了
“scrollX”: true,“autoWidth”:true 之後問題解決了，又引發了當瀏覽器的縮放比例改變以後，表頭和行不對齊的問題；如圖
圖1.

原因是在table的div裏多了一個div塊，寬度都固定了，引起了錯位問題；
後來通過在網絡諮詢解決的方式是：去掉scrollX和autoWidth，修改css樣式：

//增加這一行* 即可
* {
        margin: 0;
        padding: 0;
    }

    /*table {*/
        /*!*設置相鄰單元格的邊框間的距離*!*/
        /*border-spacing: 0;*/
        /*!*表格設置合併邊框模型*!*/
        /*border-collapse: collapse;*/
        /*text-align: center;*/
    /*}*/
    /*關鍵設置 tbody出現滾動條*/
    table tbody {
        /*display: block;*/
        /*height: 80px;*/
        /*overflow-x: scroll;*/
    }

    /*table thead,*/
    /*tbody tr {*/
        /*display: table;*/
        /*width: 100%;*/
        /*table-layout: fixed;*/
    /*}*/
    /*關鍵設置：滾動條默認寬度是16px 將thead的寬度減16px*/
   /* table thead {
        width: calc( 100% - 1em)
    }*/
    table thead th {
        background: #ccc;
    }