データテーブルに固定ヘッダー機能を追加しようとしています。
次のステートメントを追加しました。new FixedHeader( oTable);
oTable = $('#mytable').dataTable({
"aaSorting": [ [0,'asc'] ], "aoColumns" : dataTableColumns, "oLanguage": {
"sLengthMenu": 'Show <select>'+
'<option value="10">10<\/option>'+
'<option value="25">25<\/option>'+
'<option value="50">50<\/option>'+
'<option value="100">100<\/option>'+
'<option value="-1">All<\/option>'+
'<\/select> records' }, "iDisplayLength": -1, });
new FixedHeader( oTable);
元のヘッダーの上にフローティング ヘッダーが作成されました。ヘッダーの背景は透明で、既存のヘッダーとはフォントとスタイルが異なります。フローティング ヘッダーが現在のヘッダーに重なっていると、非常に奇妙に見えます。
CSS コード:
table.display thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
}
table.display tfoot th {
padding: 3px 10px;
border-top: 1px solid black;
font-weight: bold;
}
table.display tr.heading2 td {
border-bottom: 1px solid #aaa;
}