前提・実現したいこと
jQueryのDataTableを使用してテーブルを作成したいです。
もともと作成していたものをタブレットで表示するとヘッダーが固定されてしまい、スクロールされなかったので調べたところ
"ScrollX"にtrueを設定することでヘッダーも同時にスクロールするようになるとのことだったので指定したところ、タブレット側での表示はうまくいきました。
ところが、PC側で画面を見てみると(項目がそんなに多くないのでPCの画面で見るとスクロールは不要)ヘッダー部分とずれが生じてしまいました。
ScrollXを指定して、なおかつずれを解消するにはどうすればよいでしょうか?
該当のソースコード
$(document).ready(function() { $('#inputNew').bootstrapSwitch('state', true); searchResultsTable = $('#searchResults').DataTable({ "autoWidth" : true, // 列の幅の自動補正の有効/無効。 "deferRender" : false, // テーブルの遅延レンダリングの有効/無効。trueとした場合、必要になるまでテーブル要素の生成を遅延する "filter" : false, // データのフィルタリング機能の有効/無効。フィルタリングの入力ボックスは不要だが、フィルタリングの機能は有効にしておきたい場合は true に設定しておく必要がある(DataTable.defaults.sDomを参照)。 "info" : true, // テーブルのレコードの状態表示の有効/無効。true とした場合、現在のページとレコード総数を表示。 "lengthChange" : true, // 1ページの表示件数を指定するセレクトメニュー表示の有無。有効にする場合は bPaginate も泡あせて有効にする必要がある。 "paging" : true, // ページングの有効/無効。(縦スクロールバーを表示する場合はfalse) "stateSave" : true, "processing" : true, "serverSide" : false, // サーバ側とsAjaxSourceパラメータを介したAjax処理の有効/無効。 "scrollY" : "50vh", // 縦スクロールバーを表示する場合 "scrollX" : true, "scrollCollapse": true, // 縦スクロールバーを表示する場合 "lengthMenu" : [[100, 50, 10], [100, 50, 10,]], // 1ページの表示件数のセレクトメニューの表示 "columns" : [ {"data": "d1"}, {"data": "d2"}, {"data": "d3"}, {"data": "d4"}, {"data": "d5"}, {"data": "d6"}, {"data": "d7"}, {"data": "d8"}, {"data": "d9"} ], "columnDefs" : [ { "targets": 1, "data" : "download_link", "render" : function (data, type, full, meta) { return '<a href="#">' + data + '</a>'; } }, { "targets": 7, "visible": false }, { "targets": 8, "visible": false } ], "order" : [], "language" : { "lengthMenu" : "1ページ中 _MENU_件表示", "zeroRecords" : "1件も見つかりませんでした。", "info" : "_MAX_件中_START_から_END_まで(_PAGE_ / _PAGES_ ページ)", "infoEmpty" : "", "infoFiltered": "(filtered from _MAX_ total records)", "paginate" : { "first" : "最初へ", "previous": "前へ", "next" : "次へ", "last" : "最後へ" } } }); searchResultsTable.columns.adjust(); // DataTables表示後にテーブルの表示状態をクリア searchResultsTable.state.clear(); });
試したこと
調べてみたところ
table.columns.adjust();
をすると解消されるということだったので、searchResultsTable.columns.adjust();を入れてみたのですがうまくいきませんでした。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。