How to fix table width in DataTables

When the table has many columns, it may be necessary to fix the width of the table. The default 100% width is no longer suitable. The default width is 100%. If you want to change the window size to 100%, add width="100%" to the table element. As for why the 100% css does not take effect, the reason is unknown. Let's talk about how to set a fixed width for datatables.

1.html code

<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. Override certain styles (our styles have high priority, so they will override the built-in styles)

#tableArea .dataTables_wrapper {position: relative;clear: both;zoom: 1;overflow-x: auto;
}#tableArea table{width: 800px;
}

The overflow-x:auto here is new, which means that after the table content exceeds the width, a horizontal scroll bar will appear; the width of the table must be hard-coded and written directly in the table element does not take effect, the reason is unknown.

3. Set the column width (optional)

"columns": [

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

4. Run the browser and find that at this time, when the browser window is less than 800 pixels When , a horizontal scroll bar appears in the table, which is exactly the result we want.

5. Why not use the "scrollX":true configuration to implement the horizontal scroll bar? Querying the web page it rendered found that it split the table into two tables, one representing the table header and one representing the table body. This is not what I want, and if the content of its header is exceeded, it will be hidden.

The above is the detailed content of How to fix table width in DataTables. For more information, please follow other related articles on the PHP Chinese website!