数据表标题对齐问题答案

【问题标题】：dataTables header alignment issues数据表标题对齐问题
【发布时间】：2013-04-23 16:52:37
【问题描述】：

我正在为我的应用程序使用 dataTables，它很棒，但我确实有一个小问题：fnAdjustColumnSizing 函数仅在我调整浏览器大小时才有效。假设我没有调整浏览器的大小并且弹出任何额外的滚动条（即正文滚动）条或弹出任何额外的滚动条，因为我将页面中的某些溢出设置为自动标题与列不对齐.我将图片包括在内，以便您查看发生了什么。

如上图所示，右侧的滚动条会导致对齐问题。我必须重新调整窗口大小以解决这个问题，每次它不自动执行它时，当我重新调整浏览器大小时它是如何工作的。有什么建议吗？

Javascript：

$(document).ready(function() {
var oTable = $('#myTable').dataTable({
    "sScrollY" : "400px",
    "bPaginate" : false,
    "aaSorting": []
});
    $(window).bind('resize', function () {
        oTable.fnAdjustColumnSizing();
    } );
});

CSS：

#summary{
overflow-y: auto;
overflow-x: auto;
}
table.display {
font-family:arial;
background-color: #FFFFFF;
margin:0px 0pt 0px;
text-align: left;
position: relative;
border: 2px #808080;
border-style: outset;

}
table.display thead th {
background-color: #FFFFFF;
border: 1px #808080;
border-style: groove;
font-size: 14px;
font-family: Arial;
font-weight: normal;
text-align: center;
background-position: center bottom;
cursor: hand;
position: relative;

}

table.display tbody {
color: #3d3d3d;
font-size: 12px;
font-weight: normal;
vertical-align: center;
text-align:left;    
font-family: Arial;




}
#export{
cursor: hand;
}
.highlight td {background: #FFFFFF;}
.cbx{
width: 13px;
height: 13px;
}
#table1{
height:600px; 
overflow:auto;
}

【问题讨论】：

您可以确保滚动条始终存在... body { overflow-y: scroll; }

标签： javascript jquery css datatables

【解决方案1】：

添加 "sScrollX" : "100%" 到我的 javascript 后，它现在可以正常工作了！

【讨论】：

【解决方案2】：

将 dataTables.fixedHeader.js 从 fixed 更新为 auto 对我有用。

注意：像我在这个例子中那样直接更新 dataTables.fixedHeader.js 可能不是一个好主意。

【讨论】：