手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

datatables 列宽设置

时间:2024-10-13 16:47:59

1、首先,在表格的列比较多的时候,可能需要固定表格的宽度,默认值100%宽并不能满足需要。然后在table元素上添加width="100%",默认的100%宽就能改变窗口大小为100%。

datatables 列宽设置

2、然后,进行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>

datatables 列宽设置

3、覆盖内置的样式时要输入:#tableArea .dataTables_wrapper { position: relative; clear: both; zoom: 1; overflow-x: auto; }#tableArea table{ width: 800px; }。

datatables 列宽设置

4、设置列宽:"columns": [    { "data": "number", "orderable": false ,"width":"100px","searchable": false}]。

datatables 列宽设置

5、这里的overflow-x:auto是新增的,表示表格内容超出宽度后,出现横向滚动条;table的width必须写死宽度,直接写在table元素上不生效。

datatables 列宽设置

6、两个样式:table td{word-break:break-all;}和table {table-layout:fixed;}来进行设置。

datatables 列宽设置
© 手抄报圈