我正在使用 Jquery 数据表。我的问题是 Jquery 数据表在标题和正文部分之间有一些间隙。我已按如下方式初始化数据表:
var table = $('#claimListTable').DataTable({
"bSort": false,
"scrollY": 720, // inconsistent IE7/other
"scrollX": true,
"searching": false,
"paging": false,
"info": false,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
// highlight groups of 3 rows
var odd = Math.floor(iDisplayIndex / 3) % 2;
var rowClass = odd == 1 ? "odd" : "even";
$(nRow).attr("class", rowClass);
return nRow;
}
});
$("thead th").css({"border-bottom":"none","padding": "5px 0px"});
$("#claimListTable.dataTable thead th").css({"border-bottom":"none",
"padding": "5px 0px"});
$("#claimListTable.dataTable tbody td").css({"border-bottom":"none",
"padding": "5px 0px"});
$("#claimListTable.dataTable tbody tr").css({"cursor": "default"});
$("div .dataTables_scrollBody").css({"overflow-x": "auto",
"overflow-y": "auto",
"border-bottom": "none"});
}
[![enter image description here][1]][1]There is some gap between the header part and the body part after the initialization of the datatable.
当我制作 <thead>
表格的一部分 claimListTable
作为display:none
使用开发人员工具初始化后,间隙区域正在消失。但我不知道如何在使用 jquery 初始化表后执行此操作。如果有任何其他解决方法,那也很好。
I could not able to create the working fiddle as it has some dependencies, but I created a sample fiddle to get some idea
最佳答案
不是隐藏造成间隙的行,而是必须折叠它:
table#claimListTable thead {
visibility: collapse;
}
您不能简单地隐藏它的原因是因为包含一些内容以确保表格的列与其上方的标题表格保持对齐。
关于javascript - Jquery 数据表在标题和正文部分之间有一些差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53556983/