テーブルのthead要素を固定する

直近の案件でテーブルのヘッダを固定したいという要望が出てjsを書いてみたんだけど、実装方法に色々な方法があって悩んだ。

いくつか紹介されているtheadのclone()を作成して画面上部に固定する方法だと、tablesorterやチェックボックスなどのjsで機能が追加されている要素が機能しなくなってしまうし、tbodyにoverflowを使用する方法は右上の余白が気になるし、あと固定できる範囲がテーブルのエリア内だけなのでtheadをウィンドウの上部にfixedで固定したい際には使用できない。 というのがあって結局、

• thead要素をfixed、もしくはabsoluteで固定
• テーブル幅固定用の非表示要素としてthead要素をclone()
• thead要素のセルの幅はpositionを変更すると変わってしまうのでjsでcss幅だけコピーする

という方法をとった。 theadが2つになるのはなんだか気持ち悪いのだけど、一応必要無い要素である事を示すarea-hiddenをつけているのでアクセシビリティ的には大丈夫かなと思っている。

ついでなのでこれもjQueryのプラグインにしておいた。

demo: https://is8r.github.io/jquery-theadfix/

repo: https://github.com/is8r/jquery-theadfix