1. 程式人生 > >DataTables自定義表格寬度(設定橫向滾動條)

DataTables自定義表格寬度(設定橫向滾動條)

當表格的列比較多時 橫向列太擁擠  這時候需要自定義寬度 設定橫向滾動條

1.html程式碼

<div id="tableArea">
        <table id="table" class="display table table-bordered" cellspacing="0" >
            <thead>
            <tr>
                <th style="display: none">ck</th>
                <th>序號</th>
                <th>賬號</th>
                <th>姓名</th>
                <th>CPID</th>
                <th>CP名稱</th>
                <th>操作</th>
            </tr>
            </thead>
        </table>
</div>
2.樣式程式碼
#tableArea .dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;
    overflow-x: auto;
}

#tableArea table{
    width: 800px;
}


這裡的overflow-x:auto是新增的,表示表格內容超出寬度後,出現橫向滾動條;table的width必須寫死寬度,直接寫在table元素上不生效,原因未知。