【HTMLテーブル】colspanで幅が均等にならない時の対処法

こんにちは、今回の記事はHTMLのでcolspan属性でセル結合した時に各セルの列幅が均等にならないときのにどうすればいいのかという記事なります。

colspan属性はHTMLのtableタグの中で使われる属性で、表の中のセルを横に結合することができる属性になります。

悩める人

列幅が等分になると思っていたけどそうでもないみたい。

幅が広い列もあれば幅が狭い列もあり、ここを整えたいなという思いが出てきました。

Tableタグにはwidth属性など列幅を調整する属性もありますが、colspan属性を指定していると何故か利かない…。こんな時どうすればいいのかをまとめていきます。

それでは、いってみましょう！

対処：colgroupタグを使って列の設定をする

colgroupというタグを使って列の設定を入れることで列幅を均等にする事ができました。

例えば、このような表を表すHTMLがあったとします。自動で良きに幅を整えてくれるので、長い文字列がある列の列幅が広くなっています。

<table>
  <tr>
    <th>会員No.</th>
    <th>名前</th>
    <th>年齢</th>
    <th>登録日</th>
  </tr>
  <tr>
    <td>000001</td>
    <td>山田太郎</td>
    <td>20</td>
    <td>2024/1/1</td>
  </tr>
  <tr>
    <td>000002</td>
    <td>佐藤海月</td>
    <td>30</td>
    <td>2024/1/2</td>
  </tr>
  <tr>
    <td>000003</td>
    <td>大場遥</td>
    <td>40</td>
    <td>2024/1/3</td>
  </tr>
</table>

列幅を均等に整えたい場合、以下のようにcolgroupで列幅の％を指定します。

<table>
  <colgroup>
    <col style="width:25%;">
    <col style="width:25%;">
    <col style="width:25%;">
    <col style="width:25%;">
  </colgroup>
  <tr>
    <th>会員No.</th>
    <th>名前</th>
    <th>年齢</th>
    <th>登録日</th>
  </tr>
  <tr>
    <td>000001</td>
    <td>山田太郎</td>
    <td>20</td>
    <td>2024/1/1</td>
  </tr>
  <tr>
    <td>000002</td>
    <td>佐藤海月</td>
    <td>30</td>
    <td>2024/1/2</td>
  </tr>
  <tr>
    <td>000003</td>
    <td>大場遥</td>
    <td>40</td>
    <td>2024/1/3</td>
  </tr>
</table>

今回は4列あるので100％を均等に割って25%ずつで設定しています。

悩める人

表の列幅は均等になったでしょうか。

さいごに

いかがだったでしょうか。同じような悩みを持たれている方の参考になれば幸いです。それでは、また次の記事で！