关于datatables自适应以及自定义列宽度的总结

最新推荐文章于 2024-05-31 09:37:46 发布

转载最新推荐文章于 2024-05-31 09:37:46 发布 · 6.5k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lxl0419/p/8984963.html

文章标签：

#javascript #c# #python #ViewUI

本文总结了使用Datatables时如何实现表格的自适应布局以及自定义列宽度的方法。通过设置`table-layout: fixed;`属性可以控制列宽，同时在表格头部（thead）中设置各列的宽度。在遇到tab切换导致表头宽度问题时，可以使用setTimeout函数配合hide方法解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table-layout:fixed;可以自定义列的宽度

<div id="bizhi" style="width:100%;height: 85%;overflow-x: auto;">
                       <table id="data_table" class="" style="width:100%;height: 100%;table-layout:fixed;font-size: 0.2rem !important;">
                                <thead>
                                    <tr>
                                       
                                        
                                        <th rowspan="2" style="width: 36% !important;">供热站</th>
                                        <th colspan="5" style="width: 64% !important;">消耗指标</th>
                                    </tr>
                                    <tr>
                                        <th>氧化钙</th>
                                        <th>NaOH溶液</th>
                                        <th>NaOH片碱</th>
                                        <th>尿素</th>
                                        <th>工业盐</th>
                                    </tr>
                                </thead>
                       </table>
                   </div>