table-layout:fixedでセル結合する行がある時、セル横幅が可変できないと焦った話

はじめに

私は、普段の業務がPOSレジの画面設計の実装をすることがあります。ある時POSレジの画面の一部がテーブルで作られている箇所の修正をしました。
仕様上テーブルを固定する必要ありました。テーブルを固定する際は、table-layoutプロパティの値をfixedにします。
ただ、セル横幅を列ごとに変えたい場合、なぜか適用されないという状況になりました。
この記事では、それをどう解決したのかアウトプットしたいと思います。

困った問題は?

テーブルは固定にして、セル横幅を調整しても、なぜか適用されないとなりました。
本来の期待される表示としては以下を望んでいました。

１行目がセル結合で３列分表示されます。
セル横幅は、1列目が100px, 2列目が100px, 3列目が200pxと1:1:2の比率で表示が必要でした。

また、１行目の文字列が見切れる際は、改行せず隠す表示が必要でした。

ということで、大体以下のコードで実装しました。

<div>
  <table>
    <!-- 一行目 -->
    <tr>
      <td colspan="3">Qiitaは、エンジニアに関する知識を記録・共有するためのサービスです。</td>
    </tr>
    <!-- 二行目 -->
    <tr>
      <td>tr2 td1</td>
      <td>tr2 td2</td>
      <td>tr2 td3</td>
    </tr>
    <!-- 三行目 -->
    <tr>
      <td>tr3 td1</td>
      <td>tr3 td2</td>
      <td>tr3 td3</td>
    </tr>
  </table>
</div>

table, td {
  border: 1px black solid;
  table-layout: fixed;
  width: 400px;
  overflow: hidden;
  white-space: nowrap;
}

td:nth-child(1) {
  width: 100px;
}

td:nth-child(2) {
  width: 100px;
}

td:nth-child(3) {
  width: 200px;
}

「あれ!? セル横幅が適用されていない...」

何故か列ごとにwidthを指定したのに、適用されていないのです。

colspanがある中でwidthプロパティが適用されなかった原因

どうやらセル結合した場合、セル横幅が自動で計算されて適用されるみたいでした。colspanしたときセル横幅は均等に分けられるみたいでした。

colspanがある中で、widthプロパティを適用させる方法とは?

colgroupタグを使います。
セル結合する前に列の数だけcolタグを追加します。
今回の場合は、３列必要なのでcolは3つ必要になります。

<colgroup>
  <col>
  <col>
  <col>
</colgroup>

CSSの方で、colに対して、widthプロパティを設定することで、期待された横幅にできます。

ということで、改修したコードが以下になります。

<div>
  <table>
    <colgroup>
     <col>
     <col>
     <col>
    </colgroup>
    <!-- 一行目 -->
    <tr>
      <td colspan="3">Qiitaは、エンジニアに関する知識を記録・共有するためのサービスです。</td>
    </tr>
    <!-- 二行目 -->
    <tr>
      <td>tr2 td1</td>
      <td>tr2 td2</td>
      <td>tr2 td3</td>
    </tr>
    <!-- 三行目 -->
    <tr>
      <td>tr3 td1</td>
      <td>tr3 td2</td>
      <td>tr3 td3</td>
    </tr>
  </table>
</div>

table, td {
  border: 1px black solid;
  table-layout: fixed;
  width: 400px;
  overflow: hidden;
  white-space: nowrap;
}

td:nth-child(1) {
  width: 100px;
}

td:nth-child(2) {
  width: 100px;
}

td:nth-child(3) {
  width: 200px;
}

col:nth-child(1) {
    width: 100px;
}

col:nth-child(2) {
    width: 100px;
}

col:nth-child(3) {
    width: 200px;
}

これで、列ごとのwidthを設定することができました。

最後に

事象発見から解決まで大体2日ほどてこずりました。
最初はナニコレ!?と思って面くらいました。
colgroupタグもここで初めて知りましたし、知見が深まったとポジティブに捉えてまた開発に取り掛かります。

ここまで見てくれてありがとうございました。