DataTables固定表格寬度的做法

當表格的欄位比較多的時候，可能就需要固定表格的寬度了，預設的100%寬已經不適應了。預設的100%寬要實現改變視窗大小也100%的話，在table元素上加上width="100%",至於css的100%為何不生效，原因未知。下面就說說設定如何為datatables設定固定的寬度。

1.html程式碼

<div id="tableArea"><table id="userTable" 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元素上不生效，原因未知。

 

3.設定列寬（可略）

"columns": [

　　　　{ "data": "number", "orderable": false ,,"searchable": false}
]

 

4.運行瀏覽，發現此時，當瀏覽器視窗小於800像素的時候，表格出現了橫向的捲軸，正是我們想要的結果。

 

5.為什麼不使用"scrollX":true的設定實現橫向捲軸呢？查詢它渲染後的網頁發現，它把table拆分成了兩個表格，一個表示表頭，一個表示表頭。這不是我想要的，而且它表頭的內容若是超出的話是隱藏的。

 

以上是DataTables固定表格寬度的做法的詳細內容。更多資訊請關注PHP中文網其他相關文章！