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

Question

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

您可以帮我吗？

JsFiddle

将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%');
叉状小提琴-> http://jsfiddle.net/YL7hZ/

Answer 2

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