jQueryのDataTablesでscrollYを指定するとヘッダーthのサイズがおかしい

プログラミング

JQueryで綺麗なテーブルを作れるのがDataTablesです。

DataTablesの使い方は以下にまとめました。

日本語対応jQuery DataTablesのfixedColumnsを使って、Excelのウィンドウ枠風(Freeze Panes)の表を作る
JavaScriptで表を作るならjQueryのDataTablesがとにかく便利です。 これを使うようになっ...

ところで、DataTablesで縦方向にスクロールしようとして、scrollYを指定すると、ヘッダーthのサイズに問題が発生しました。

いろいろやってみてなんとか解決したのでメモしました。

スポンサーリンク
スポンサーリンク

scrollYを指定して発生した問題

以下のように

DataTablesを使ってテーブルを作成して、

scrollYとscrollCollaplseを指定したとします。

これを表示すると以下のように表示されます。

WS000475

ちょっとボヤけて見えにくいですか?

以下の4個の問題点があります。

  • ヘッダー部分 th の幅が、他の行 tr の幅と合わない。
  • Windowサイズをリサイズしてもヘッダー部分 th の幅が、他の行 tr の幅と合わない。
  • ヘッダー部分 th のpaddingが効かない。デフォルトの top:10px right:18px bottom:10px left:18px のままで変更できない。
  • タブペインでは、すべてのペインのヘッダー部分 th の幅が、他の行 tr の幅と合わない。

調べてみると同じような現象を発見しました。

DataTables fixed headers misaligned with columns in wide tables

jQuery Datatables Header Misaligned With Vertical Scrolling

解決策がいろいろと書いてあるので、一つ一つ試してみます。

よく書いてあったのが以下の解決策です。

要は「0.01秒ほど時間を置いて、fnAdjustColumnSizing()を呼び出せ」ってことです。

試してみます。

うーん、どういう訳か関数を認識していません。

次に見つけたのが、以下の解決策です。

これは、DataTablesを作成するタイミングで、columns.adjust()を呼び出すっていう方法です。

試してみますが、うまくいきません。

あとは、

Responsiveというプラグイン

https://datatables.net/extensions/responsive/

FixedHeaderというプラグイン

https://datatables.net/extensions/fixedheader/

を試してみる方法もあるようなのですが、うまくいきません。

scrollYでヘッダーthの幅がおかしくなった場合の修正方法

最初の2個の問題

  • ヘッダー部分 th の幅が、他の行 tr の幅と合わない。
  • Windowサイズをリサイズしてもヘッダー部分 th の幅が、他の行 tr の幅と合わない。

については、以下のようにJavaScriptで記述すると解決しました。

次に3個目の問題

  • ヘッダー部分 th のpaddingが効かない。デフォルトの top:10px right:18px bottom:10px left:18px のままで変更できない。

については、以下のようにCSSで記述すると解決しました。

要は、デフォルトのDataTablesのpaddingの設定を変更します。

次に4個目の問題

  • タブペインでは、すべてのペインのヘッダー部分 th の幅が、他の行 tr の幅と合わない。

については、以下のようにJavaScriptで記述すると解決しました。

以上ですが、お役に立てれば幸いです。

プログラミングの無料レッスン体験

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

<Codecampの特徴>

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp