見出しが複数行あるテーブルの実装方法について

Question

写真のように、見出しが複数行あるテーブルを作成しているのですが、この場合の見出し部分の実装について、
ご意見を伺いたいです。
なお、縦見出しの列は固定で、他のセルは横にスクロールできるイメージです。
前提として
・PCのみ
・firefox/Chromeのみ
になります。

悩んでいる箇所としては、
大・中・小の見出しが重なっている部分で、tableレイアウトにおいては、あまり適切な実装方法のイメージがつかず。
display:grid を使うといいのか・・？と思いつつも決めかねています。
（縦見出しの列はCSSのposition: stickyで固定しようとしています。）

ご意見いただけると嬉しいです。

Answer 1

同様の実装を試みた経験からお話します。

邪推ですが、見出し部分にはjsonのようなデータを渡して、動的に表示する実装をするかと思います。
その前提で書きました。ご留意ください。

方法としては以下が考えられます。
・大中小ごとに行をつくり、ループを回す
・CSSGridをつかう
・大の行をつくり、その中に中の行をつくり、その中に小の行をつくる
・canvasで実装

順番はおすすめ順です。

・大中小ごとに行をつくり、ループを回す
こちらは一番簡易な実装です。

<tr>
 <th colspan="3">大１</th>
 <th>２</th>
 <th>３</th>
</tr>
<tr>
 <th>中１-1</th>
 <th>中１-2</th>
 <th>中１-3</th>
 <th>２</th>
 <th>３</th>
</tr>
<tr>
 <th>小１</th>
 <th>２</th>
 <th>３</th>
</tr>

注意点としては２つあります。このループを回せるデータ構造にすること。加えてセルの幅を決定するために、大中には自分が持つ（中）小の個数データをもたせることがあります。

・CSSGridをつかう
ほぼ説明不要です。
ただし、上記と違い<tr>を使わないため、<tbody>側とのズレを細かく修正しなくてはいけません。そういった点で上記より手間がかかります。

・大の行をつくり、その中に中の行をつくり、その中に小の行をつくる

<tr>
 <table>
  <th>大</th>
  <tr>
   <th>中1</th>
   <table>
    <th>小</th>
   </table>
  </tr>
  <tr>
   <th>中2</th>
  </tr>
 </table>
</tr>

記憶が怪しいですが、このような実装だったはずです。<table>のネストですね。こちらは構造も複雑ですし、CSSの調整にも時間がかかります。データ構造がわかりやすいことがメリットです。

・canvasで実装
一番自由度と性能が高く、一番難易度も高い実装方法です。
ひとつライブラリをつくるぐらいの気概が必要です。

Comments

[yayaya]

ありがとうございます！
1の場合、CSSの実装があまりイメージつかず、アドバイスいただけると嬉しいのですが、
描いていただいたようなテーブルタグにdisplay:glidで実装していくようなイメージでしょうか？

[ttakatech]

１の場合とは「大中小ごとに行をつくり、ループを回す」のことだとしてお話します。
htmlの<table>でつくられた要素は、すでに表のセルを持っています。そのため、display:gridは不要です。
widthやheight、borderなどの設定をすれば、すぐにでも表として機能します。
ただし大や中は、かかえる中小の数に応じてwidthを変える必要があります。
cssで変えるのもいいですし、colspan属性をつかうのも有用です。
http://html5.cyberlab.info/elements/table/td-colspan.html

回答をcolspanを混ぜたものに少々修正しました。ご確認ください。

[yayaya]

> １の場合とは「大中小ごとに行をつくり、ループを回す」のことだとしてお話します。
質問内容に不備があり、失礼しました・・！
ご回答いただきありがとうございます！

まさにやりたいことがcolspan属性でできそうです・・！
早速試してみます！

[yayaya]

上記試してみました！
思った通りの実装ができました。
本当に感謝です。
ありがとうございました！

[ttakatech]

参考になったようで何よりです。