启用DataTable时，标头列与scrollX不对齐
启用DataTable时，标头列与scrollX不对齐
提问于 2016-01-20 10:07:59
我有一个问题，是反复使用这个插件。
启用scrollX选项时，标头列会出现对齐错误。我尝试了很多在堆栈溢出上读到的解决方案，但是我没有成功。
也许，这是插件版本的问题吗？
但是，这是我的dataTable设置：
var oTable = $('#table').dataTable({
"bJQueryUI": true,
"aaData": jsonList,
"bPaginate": true,
"scrollX": true,
"scrollCollapse" : true,
"bLengthChange" : true,
"bAutoWidth" : true,
"oLanguage" : IT,
"aoColumns": [
{ "mDataProp": "name", "sClass": "alignCenter" },
{ "mDataProp": "surname", "sClass": "alignCenter" },
{ "mDataProp": "age", "sClass": "alignCenter" },
{ "mDataProp": "city", "sClass": "alignCenter" },
{ "mDataProp": "state", "sClass": "alignCenter" },
{ "mDataProp": "work", "sClass": "alignCenter" },
],
"aaSorting": [[1, 'asc']],
"fnDrawCallback": function () {
formatTable();
}我桌子的风格：
class="display" cellspacing="0" width="100%"图书馆版本：
JQuery1.11.1.min.js- DataTables 1.10.3
回答 3
Stack Overflow用户
发布于 2018-08-03 08:03:42
当在DataTables中使用scrollX或scrollY参数启用滚动时，它会将整个表分割成两个或三个单独的DataTables元素；页眉、正文和(可选)页脚。这样做是为了提供以跨浏览器方式滚动DataTable的不同部分的能力。
下面的代码将一个div包在DataTable周围，样式为“溢出为自动”。我们需要在dataTable完成执行时添加div。我们可以这样做：
$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});如果您使用的是scrollX、scrollY、scrollXInner或sScrollXInner选项，请删除它们。他们可能会引起问题。
Stack Overflow用户
发布于 2020-10-07 20:23:42
将标头表的宽度与主体表的宽度匹配。例如，如果正文中的宽度为100%，则可以使用css作为标题：
.dataTables_scrollHeadInner{
width: 100% !important;
}
.dataTables_scrollHeadInner table{
width: 100% !important;
}Stack Overflow用户
发布于 2022-01-11 09:50:57
它可能取决于您的html，但可能删除"scrollX"：true，可能会对您有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34897030
复制相关文章
相似问题
腾讯云开发者
