テーブル（表）のセルのサイズを指定する

テーブル（表）のセルのサイズを指定

table要素を使ってテーブルを作るとき、列の単位でセルの幅を指定したいことがあります。

例えば次のような表の場合、「ID」や「定員」についてはそこまで幅は必要ありませんが、「イベント名」は文字が多く入る可能性があるため、長めの幅をあらかじめ指定できると全体のバランスが整います。

テーブルはもともと列ごとのセルの幅は自動的に判断して設定をしてくれますが、CSSでしっかりと指定できた方が確実です。
そこで、th要素やtd要素と擬似クラス「:nth-child」を組み合わせて次のように幅を指定します。

CSS コード例

table th:nth-child(1) {
  width: 15%;
}
table th:nth-child(2) {
  width: 40%;
}
table th:nth-child(3) {
  width: 15%;
}
table th:nth-child(4) {
  width: 30%;
}

HTML コード例

<table>
  <tr>
    <th>ID</th>
    <th>イベント名</th>
    <th>定員</th>
    <th>開催日</th>
  </tr>
  <tr>
    <td>E080125</td>
    <td>Netflix鑑賞会</td>
    <td>10名</td>
    <td>18年8月20日</td>
  </tr>
  <tr>
    <td>E080126</td>
    <td>BBQ大会</td>
    <td>40名</td>
    <td>18年8月23日</td>
  </tr>
  <tr>
    <td>E080127</td>
    <td>読書会</td>
    <td>20名</td>
    <td>18年8月25日</td>
  </tr>
  <tr>
    <td>E080128</td>
    <td>プラネタリウム鑑賞会</td>
    <td>15名</td>
    <td>18年8月28日</td>
  </tr>
  <tr>
    <td>E080129</td>
    <td>第2回 Netflix鑑賞会</td>
    <td>10名</td>
    <td>18年8月30日</td>
  </tr>
  <tr>
    <td>E090130</td>
    <td>花火大会</td>
    <td>20名</td>
    <td>18年9月7日</td>
  </tr>
</table>

今回はテーブルの1行目がラベルとなり、th要素を使っているので「th:nth-child(1)」と指定しています。
もし1行目からtd要素で始まっている場合はtd要素に対して「td:nth-child(1)」と指定する形でも同じように幅を指定できます。

全てのセルを等幅にする

セルごと（列ごと）に幅を指定するのではなく、全体のセルの幅を等しくすることもできます。
その場合は、テーブルの親要素であるtable要素にtable-layoutプロパティを指定します。

CSS コード例

table {
  table-layout: fixed;
}

コード例

<table>
  <tr>
    <th>ID</th>
    <th>イベント名</th>
    <th>定員</th>
    <th>開催日</th>
  </tr>
  <tr>
    <td>E080125</td>
    <td>Netflix鑑賞会</td>
    <td>10名</td>
    <td>18年8月20日</td>
  </tr>
  <tr>
    <td>E080126</td>
    <td>BBQ大会</td>
    <td>40名</td>
    <td>18年8月23日</td>
  </tr>
  <tr>
    <td>E080127</td>
    <td>読書会</td>
    <td>20名</td>
    <td>18年8月25日</td>
  </tr>
  <tr>
    <td>E080128</td>
    <td>プラネタリウム鑑賞会</td>
    <td>15名</td>
    <td>18年8月28日</td>
  </tr>
  <tr>
    <td>E080129</td>
    <td>第2回 Netflix鑑賞会</td>
    <td>10名</td>
    <td>18年8月30日</td>
  </tr>
  <tr>
    <td>E090130</td>
    <td>花火大会</td>
    <td>20名</td>
    <td>18年9月7日</td>
  </tr>
</table>

セルの文字数などで幅を左右されないため、こちらの方法でもテーブル全体のバランスは整って見えます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。