株式会社コネクト開発雑記帳

　色々と使い勝手のいいフロントエンドフレームワークにBootstrapというものがあります。
　簡単に言えばホームページ画面の構築に必要なレイアウト用のCSSが予め定義されていて、ルールに沿ってHTMLを書いて要素に必要なClassを指定していけばグリッドデザインなど基本的な骨組みが効率的に開発できるというもの。
　画一的な表現に強いのでデータのアーカイブサイトやシステム画面設計などに用いられることが多いですが、デザイン性が求められるホームページだと融通が効かない時もあるので一概に“これを使えば生産性が上がる”とは言えないものの、ある程度業界標準として指針になるフレームワークがあると開発の参考になります。

Bootstrapで表組を作成する基本手順

　さて、このBootstrapで表を作ると下記のようなHTMLで基本レイアウトが適用できます。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">head1</th>
      <th scope="col">head2</th>
      <th scope="col">head3</th>
	...
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>cell1</td>
      <td>cell2</td>
      <td>cell3</td>
	...
    </tr>

	...
  </tbody>
</table>

　この状態では特になにも設定していないので単純に表が作成されただけですが、今回の主題である「見出し行を固定表示する」という場合はcssでposition:sticky;を指定します。
　昔はもっといろいろな機能を組み合わせないと上部固定できなかったのがずいぶんと簡単になったものです。
　Bootstrapでもsticky-topというClassが用意されているので、それを入れれば適用されます。

見出し行上部固定の問題点

　ここまでの話で、埋め込んだサンプルを見ると何も問題ないように見えますが、今回気になったのはスマートフォン対応したときに上部固定が機能しなくなること。
　前述のサンプルはスマートフォン対応していないので行や列数が増えた時に画面の小さな端末で表示すると表が本文枠より外にはみ出て表示されます。
　これを避けるには表を<div class="table-responsive">で囲むことがBootstrapで示されているものの、そうすると今度はposition:stickeyでの見出し行固定が効かないんですよ。

　原因は単純で、position:stickeyを使用する場合は親要素のCSSでoverflowがvisibleになっていることが条件なのに、<div class="table-responsive">を指定するとスマートフォンで横スクロールさせるためにoverflow-x:scroolが適用されてしまうからなんですね。

　この問題をどのように回避すべきか検討していましたが、関連する開発者フォーラムなどでやりとりされている内容を見ても思ったより情報が少なく、日本語で議論されているサイトはほぼ皆無という状況だったので備忘録代わりにこの記事を書いた次第です。

　結論から言えば、Bootstrapではレスポンシブテーブルで見出し行固定をする使用方法は想定されていないためそれ単体での解決は現状不可能っぽいですね。
　対応としては、<div class="table-responsive">をやめて独自にCSSやJavascriptで動作させるか、同じ表組に関する不満を持った有志が作ったBootstrap Tableというライブラリを使うかのいずれかになりそうです。テーブルの親要素にheightを指定してテーブルを表示する高さを小さくして中でスクロールするようにすれば動作しますが、せっかく表組にしたのに一覧性がなくなるのであまりやりたくない。

　試しにBootstrap Tableを使ってみましたが、そのまま適用すると見出し行固定は機能するもののBootstrapで調整した表組デザインに上書きする形で Bootstrap tableのCSSレイアウトが適用されてくるのでデザイン調整が面倒になるのと、画面の表示処理で一度テーブルのHTMLが再構築される関係から表の中にボタンを配置してJavascriptで何らかの動作をさせている場合は処理タイミングがバッティングするとボタンが機能しなくなるみたいでUI設計でも調整が必要になりそうなことから一長一短といったところですね。

　少し長くなってしまったのでBootstrap Table の使い方などは省きますが、Bootstrapの次期バージョンで標準対応してくれないかなと思いつつ、そもそも近年のWebデザインではテーブルを積極的には利用しなくなってきている面もあるため期待薄かとも感じています。無理にテーブルにこだわるよりは今後はflexやgridなど新しいCSSプロパティを使っていくべきですかねぇ。