私は自分のアプリケーションに 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;
}