datatablesでヘッダーがずれる問題を解決したい。

Question

tableを使用する際、<div class="table-responsive">を指定するとスマートフォンなど幅の狭いレイアウトの際は、自動的に横スクロールの設定を行ってくれるのですが、スクロールの際、ページネーションや検索窓、その他の要素も一緒にスクロールされてしまいますので、これを固定したいです。

Comments

[x_x]

jQuery を読み込む順番がおかしくないですか？
提示コードの前にも jQuery を読んでいるのでしょうか？

[退会済みユーザー]

こんにちは。
この順番でないと、スマートフォン表示の際bootstrap4 のハンバーガーメニューが閉じないという不具合が起こったのですが、いかがでしょうか？

[s8_chu]

「"scrollX": true」で生じた問題とは何か教えていただけませんか？

[退会済みユーザー]

ヘッダーとデータがずれてしまいました。
Chromの検証ツールでは正常に動作するのですが、本番環境（heroku）ではずれてしまいました。

[s8_chu]

恐らく、その問題が Heroku でしか発生しないということはないと思うので、その問題を解決するほうが良いと思います。ヘッダーがずれる現象として、以下のような記事が見つかりましたが、参考になりませんでしょうか？(既に読まれていたらすみません)

https://qiita.com/kakimochi/items/0035eb355c90cb088bb9
https://teratail.com/questions/156289
https://hishiwork.jp/jquery-datatables-%E3%83%98%E3%83%83%E3%83%80%E3%81%8C%E3%81%9A%E3%82%8C%E3%82%8B%E4%BA%8B%E8%B1%A1%E3%81%AE%E8%A7%A3%E6%B6%88%E6%96%B9%E6%B3%95/

[退会済みユーザー]

ありがとうございます。
早速試してみます。結果をこちらで報告させて頂きますので、もうしばらくお待ち下さい。

Answer 1

CSSで固定することで解決致しました。