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

プログラミング
スポンサーリンク

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

 

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

日本語対応jQuery DataTablesのfixedColumnsを使って、Excelのウィンドウ枠風(Freeze Panes)の表を作る
JavaScriptで表を作るならjQueryのDataTablesがとにかく便利です。 これを使うようになってからまともに、th,tr,tdなどを使って表を作らなくなりました。 今回、日本語対応jQuery DataTable...

 

ところで、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というプラグイン

Responsive

FixedHeaderというプラグイン

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

 

 

 

コメント

タイトルとURLをコピーしました