2021-8-9 前端达人
当表格的列比较多的时候，可能就需要固定表格的宽度了，默认的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 ,"width":"100px","searchable": false}
]
4.运行浏览，发现此时，当浏览器窗口小于800像素的时候，表格出现了横向的滚动条，正是我们想要的结果。
5.为什么不用"scrollX":true的配置实现横向滚动条呢？查询它渲染后的网页发现，它把table拆分成了两个表格，一个表示表头，一个表示表体。这不是我想要的，而且它表头的内容若是超出的话是隐藏的。
6.还有两个样式，可以参考参考，可能对你有用。
table td{
word-break:break-all;
}
单词也可以允许换行，这对于单元格的宽度有很好的控制，而不会让单元格被内容撑开！
table
{
table-layout:fixed;
}
表格布局算法为固定（列宽由表格宽度和列宽度设定）。
文章来源：博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务