CSSでtableの3つのtdを左右均等に配置する方法｜flexが効かない原因と正しいレイアウト方法

CSSでtableを作成し、1行に3つのtdを配置した際に左右対称に並べたい場合、display:flexやgapを試してもうまく動作しないことがあります。これはtable要素とflexレイアウトの仕組みが異なるためです。

この記事では、tableのセルを均等配置する方法や、flexのgapが効かない原因、左右対称に見せるための適切なCSS指定について解説します。

table要素にdisplay:flexを指定しても期待通り動かない理由

HTMLのtableは、通常のブロック要素とは異なり、表形式のレイアウトを管理するための専用ルールを持っています。

例えば、tableの中にあるtrやtdは、それぞれ表の行やセルとして扱われます。そのため、tdに対してflexのような配置ルールを適用しようとしても、table本来のレイアウト計算が優先される場合があります。

また、gapプロパティはflexやgridでは利用できますが、基本的なtableレイアウトでは対応していません。そのため、tableのセル間隔を調整したい場合は別の方法を使う必要があります。

3つのtdを左右対称に並べたい場合は、各セルの幅を指定する方法が最もシンプルです。

例えば、1行に3つのセルを均等配置したい場合は、table-layoutを使用します。

<table class="sample"> <tr> <td>左</td> <td>中央</td> <td>右</td> </tr> </table>

.sample{width:100%;table-layout:fixed;} .sample td{text-align:center;width:33.333%;}

table-layout:fixedを指定すると、セル幅が均等に計算されるため、3つのtdを左右対称に配置できます。

tableでセル間に余白を作りたい場合、flexのgapではなくborder-spacingを利用します。

table{border-spacing:20px 0;}

この指定では、横方向に20pxの間隔を空けることができます。table専用の間隔調整方法なので、tdの配置を崩さずに余白を設定できます。

例えば、商品一覧やカード型のレイアウトなどで3列の表を作る場合、border-spacingを使うことで自然な左右バランスを保てます。

もし作成したいものが「表」ではなく、3つのコンテンツを横並びにしたデザインの場合は、tableよりflexやgridを使う方が適しています。

例えば、プロフィールカードや商品紹介ボックスなどの場合は、以下のようにflexを利用できます。

.container{display:flex;justify-content:space-between;gap:20px;} .item{width:30%;}

この場合、gapはflex要素同士の間隔として正常に動作します。tableはデータ表現、flexやgridはデザイン配置というように用途を分けることが重要です。

flexを利用する場合、左右対称に配置するにはjustify-contentの指定が重要です。

よく使われる指定には以下があります。

3つの要素を左右対称に配置したい場合は、デザインの目的に合わせてこれらを使い分けます。

tableのセル配置でgapが効かない場合、多くは「表を作るためのHTML」と「配置するためのCSS」を混同していることが原因です。

データを行と列で整理する場合はtableを使い、画面上のパーツを並べる場合はflexやgridを使うことで、CSSの指定がシンプルになります。

例えば、会社情報や料金表ならtable、3つの商品カードを横並びに表示するならflexというように用途を分けると、左右対称のレイアウトも簡単に作成できます。

tableの3つのtdを左右対称に配置したい場合、flexのgapを使うのではなく、table-layoutやwidth指定、border-spacingを利用する方法が基本です。

一方で、デザイン目的の横並び配置であればtableではなくflexやgridを使うことで、justify-contentやgapを自由に利用できます。

HTMLの役割に合わせてtableとflexを使い分けることが、崩れにくく管理しやすいCSSレイアウトを作るポイントです。