datatables 列宽设置

2025-10-18 20:58:23

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 列宽设置

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢