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

シェアする

  • このエントリーをはてなブックマークに追加

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

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

program
JavaScriptで表を作るならjQueryのDataTablesがとにかく便利です。これを使うようになってからまともに、th,tr,tdなどを使って表を作ら...

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で記述すると解決しました。

 

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

 

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です