Question

我试图在我的模板表格上应用DataTable jquery插件。但是当我应用滚动时，表格不对齐标题和正文。

你可以帮我吗？

在我的桌子上应用DataTable的Jquery代码：

$(function(){
$('#tabelainfo').dataTable({
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": true,
    "bAutoWidth": false,
    "sScrollY": "200px",
    "sScrollX": "100%",
    "sPaginationType": "full_numbers",
    "bRetrieve": true,
    "bScrollCollapse": true,
});

$(window).bind('resize', function() {
    oTable.fnAdjustColumnSizing();
});
jQuery('#' + idTabela).wrap('<div class="scrollStyle" />');

}）;

见下面的小提琴：

谢谢！

Answer 1

请注意，差异正好是垂直滚动条的宽度。这是因为您在同一页面上同时拥有sScrollY和sScrollX。

这两个部分.dataTables_scrollHead和.dataTables_scrollBody都有100%宽度，但.dataTables_scrollBody会减少垂直滚动条的宽度，因为您有sScrollY也。

因此解决方案是使用垂直滚动条窃取的额外宽度扩展.dataTables_scrollBody。见how you can calculate the width of a scollbar。通常是15岁。

必须将其添加到百分比中的.dataTables_scrollBody，而不是像素。 1315px表中最接近15的百分比是2％（26）。因此，在初始化数据表后将其添加到脚本中：

$(".dataTables_scrollBody").css('width', '102%');

分叉小提琴 - ＆gt;的 http://jsfiddle.net/YL7hZ/

Answer 2

我也面临着同样的问题。如果您具有较短的列表宽度并结合了scrollX选项，则会发生这种情况。

因此，我的解决方案是将值scrollX设置为false或将其删除。

"scrollX"       : false,

也许这个答案将来可以帮助某个人。

应用滚动时，数据表未对齐表格的标题和正文

2 个答案: