数据表jquery -表头宽度与正文宽度不对齐
数据表jquery -表头宽度与正文宽度不对齐
提问于 2013-06-21 06:31:13
我使用的是jQuery数据。运行应用程序时，标头宽度与主体宽度不对齐。但当我点击标题，它是对齐身体的宽度，但即使是有一些轻微的不对齐。这个问题只发生在IE中。
当页面被加载时，如下所示：
单击标题后：
我的datatable代码：
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
"bSortable": false
},
null,
null,
null,
null
]
});rates是我的表号。
有人能帮我吗？提前谢谢。
回答 33
Stack Overflow用户
回答已采纳
发布于 2013-06-25 03:32:05
找到了解决办法：
将table-layout:fixed添加到表中。并在IE模式下打开应用程序。
Stack Overflow用户
发布于 2017-09-11 08:54:01
原因
最有可能的情况是，表最初是隐藏的，这使得jQuery DataTables无法计算列宽。
解决方案
- 如果表位于可折叠元素中，则需要在可折叠元素可见时调整标头。 例如，对于Bootstrap崩溃插件： $(‘#myCollapsible’).on(‘shown.bs.CLOVION’，函数() { $($.fn.dataTable.tables(true)).DataTable() .columns.adjust()；}；
- 如果表在选项卡中，则需要在选项卡可见时调整标头。 例如，对于Bootstrap Tab插件： $(‘adata-toggle=“tab”).on(’shown.bs.tab‘，函数(E){ $($.fn.dataTable.tables(true)).DataTable() .columns.adjust()；})；
上面的代码调整页面上所有表的列宽度。有关更多信息，请参见columns().adjust() API方法。
响应性，滚动或FIXEDCOLUMNS扩展
如果您使用的是响应式、滚动器或FixedColumns扩展，则需要使用附加的API方法来解决这个问题。
- 如果您使用的是响应扩展，则需要调用
responsive.recalc()API方法以及columns().adjust()API方法之外的。参见响应扩展-不正确的断点示例。 - 如果使用滚动扩展，则需要调用
scroller.measure()API方法，而不是columns().adjust()API方法。参见滚动扩展-不正确的列宽或丢失数据示例。 - 如果使用FixedColumns扩展，则需要调用
fixedColumns().relayout()API方法以及columns().adjust()API方法之外的。参见FixedColumns扩展-不正确的列宽示例。
链接
当表最初隐藏时，请参阅jQuery DataTables -引导选项卡的列宽度问题以解决jQuery DataTables中列中最常见的问题。
Stack Overflow用户
发布于 2013-08-17 10:52:56
我通过用带有dataTable的div包装“overflow:auto”表来解决这个问题
.dataTables_scroll
{
overflow:auto;
}并在dataTable初始化后添加此JS：
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');不要使用sScrollX或sScrollY，删除它们，自己添加一个div包装器，这样做也是一样的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17237812
复制相关文章
点击加载更多
相似问题
友好的配置文件URL与控制器混在一起
空手道摘要报告在升级到1.0.0后没有显示所有经过测试的特性
如何从另一个空手道特性文件中调用依赖JAR中的空手道特性？
黄瓜报告中称为特性/场景的空手道显示标题
空手道:从被调用的特性文件中处理soap响应
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
