table内のdivにheight:100%が効かない理由と解決策

はじめに

テーブルレイアウトの中で、セルの高さに合わせて中身の要素（<div>タグなど）をいっぱいに広げたい場面があります。

しかし、単純にheight: 100%を指定しても、背景色が途切れたり要素が伸びなかったりする問題に直面することがあります。

そこで、CSSの仕組みを踏まえ、テーブルセルの高さいっぱいに要素をしっかりとフィットさせます。

この記事では、この方法について説明します。

問題点

意図通りに動かないコードの例を以下に示します。

.lesson-wrapperにheight: 100%を指定していますが、親要素であるセルの高さいっぱいまで広がりません。

<table class="lesson-table">
  <tr>
    <td>
      <div class="lesson-wrapper">
        このセルの高さが一番高い場合、隣の赤いセルもこの高さまで伸びてほしい。
      </div>
    </td>
    <td>
      <div class="lesson-wrapper" style="background-color:#ffc107">
        要素
      </div>
    </td>
  </tr>
</table>

<style>
.lesson-table {
  margin:0 auto;
  width: 400px;
}

.lesson-table td {
  height: 100%;
  width: 50%;
}

.lesson-wrapper {
  height: 100%; /* これが効かない */
  padding: 10px;
  width: 100%;
}
</style>

原因

CSSにおいて、パーセント（%）で高さを指定する場合、親要素の高さが確定していることが条件となります。

1. <td>タグのデフォルトの高さはauto（コンテンツ依存）です。

2. 子要素の <div>タグが「親の100%になりたい」と参照しに行っても、親の<td>タグ自体が「まだ自分の高さは決まっていない」と答えるため、計算の基準が見つかりません。

3. その結果、height: 100%は実質的に無視され、<div>タグは自分自身のコンテンツ量に必要な高さになってしまいます。

対策

以下のコードをstyle.cssに追加します。

.lesson-table {
  height: 1px; 
}

解説

「1pxに固定されてしまうのでは？」と不安になりますが、テーブルには「コンテンツの高さに合わせて、必要な分だけ自動的に拡張される」という規則があります。

1. <table>タグにheight: 1pxを指定すると、これがブラウザにとっての「高さの計算基準」になります。

2. テーブルは中身に合わせて実際には1px以上に膨らみますが、内部的には「高さが指定されている状態」として扱われます。

3. これにより、孫要素である<div>タグのheight: 100%が、膨らんだ後のセルの高さを正しく参照できるようになり、高さが揃うようになります。

さいごに

今回紹介した方法を使えば、複雑なレイアウトを組まなくても、テーブル内の要素を簡単にセルの高さに合わせて引き伸ばすことができます。
テーブルレイアウトで中身がうまく伸びない現象は、CSSの高さ計算の仕様を理解することでスマートに解決可能です。
今後のコーディングで要素の高さが揃わず困ったときは、ぜひこの「テーブル全体へのheight指定」を活用してみてください。