【CSS】テーブル関連プロパティを基本から解説｜Webの基礎

記事内には広告が含まれます

2026年7月30日

はじめに

「表を作ったら枠線が二重になってしまう」「セルの中の余白をうまく調整できない」「スマホで見ると表がはみ出して崩れてしまう」という経験はありませんか？

これらはすべて、CSSのテーブル関連プロパティを理解すれば解決できます。

前回の記事では、<ul> や <ol> を装飾するリスト関連プロパティについて解説しました。
今回は、<table> タグで作った表の見た目を整える border-collapse や table-layout などのプロパティと、スマホでも崩れないレスポンシブテーブルの作り方まで、わかりやすく解説します。

テーブルとは？（table・tr・th・td・captionのおさらい）

CSSのテーブルプロパティを理解する前に、まずHTML側のテーブル要素をおさらいしておきましょう。

要素	意味
`<table>`	表全体を囲む要素
`<caption>`	表のタイトル・見出し
`<tr>`	行（table row）
`<th>`	見出しセル（table header）
`<td>`	データセル（table data）

<table>
    <caption>月別売上一覧</caption>
    <tr>
        <th>月</th>
        <th>売上</th>
    </tr>
    <tr>
        <td>1月</td>
        <td>120,000円</td>
    </tr>
    <tr>
        <td>2月</td>
        <td>98,000円</td>
    </tr>
</table>

この状態ではブラウザの初期スタイルのまま表示されるため、枠線が二重になっていたり、セルの余白が詰まりすぎていたりと、見た目が整っていません。ここからCSSで装飾を加えていきます。

border-collapse（枠線の結合方法）

border-collapse は、隣り合うセルの枠線を1本にまとめるかどうかを指定します。

主な指定値

値	説明
`separate`	セルごとに枠線を分けて表示する（初期値）
`collapse`	隣り合う枠線を1本に結合して表示する

書式

table {
    border-collapse: 値;
}

サンプル

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
}

初期値の separate のまま th・td に border を指定すると、セルとセルの間に隙間ができて枠線が二重に見えてしまいます。表全体をすっきりした1本線で仕上げたい場合は、border-collapse: collapse; を忘れずに指定しましょう。

border-spacing（セル間の間隔）

border-spacing は、border-collapse: separate; の状態でセルとセルの間隔を指定します。

書式

table {
    border-spacing: 値;
}

サンプル

table {
    border-collapse: separate;
    border-spacing: 8px 4px;
}

横方向の間隔と縦方向の間隔をそれぞれ指定でき、値を1つだけ指定した場合は縦横とも同じ間隔になります。

border-spacing は border-collapse: collapse; を指定していると効果がありません。セル同士の間隔を空けたデザインにしたい場合は separate（初期値）のままにしておく必要があります。

table-layout（列幅の計算方法）

table-layout は、表の列幅をどのように計算するかを指定します。

主な指定値

値	説明
`auto`	セルの中身に応じて列幅を自動計算する（初期値）
`fixed`	1行目のセル幅（またはCSSで指定した幅）で列幅を固定する

書式

table {
    table-layout: 値;
    width: 100%;
}

サンプル

table.data-table {
    table-layout: fixed;
    width: 100%;
}

table.data-table th:first-child,
table.data-table td:first-child {
    width: 30%;
}

table-layout: fixed; にすると、ブラウザがセルの中身を全部読み込んでから列幅を計算する必要がなくなるため、表の描画が速くなるというメリットもあります。行数の多い表を扱う場合におすすめです。

caption-side（キャプションの位置）

caption-side は、<caption> で指定した表のタイトルを表の上と下のどちらに表示するかを指定します。

主な指定値

値	説明
`top`	表の上にキャプションを表示する（初期値）
`bottom`	表の下にキャプションを表示する

書式

caption {
    caption-side: 値;
}

サンプル

caption {
    caption-side: bottom;
    text-align: left;
    color: #666;
    font-size: 0.9em;
}

実務サンプル1（縞模様テーブル）

:nth-child() 疑似クラスと組み合わせることで、1行おきに背景色を変えた縞模様テーブル（ゼブラストライプ）を作成できます。

HTML

<table class="zebra-table">
    <tr>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>商品A</td>
        <td>1,000円</td>
    </tr>
    <tr>
        <td>商品B</td>
        <td>1,500円</td>
    </tr>
    <tr>
        <td>商品C</td>
        <td>2,000円</td>
    </tr>
</table>

CSS

.zebra-table {
    border-collapse: collapse;
    width: 100%;
}

.zebra-table th,
.zebra-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.zebra-table th {
    background-color: #f2f2f2;
}

.zebra-table tr:nth-child(even) {
    background-color: #fafafa;
}

tr:nth-child(even) により偶数行だけに背景色が付き、行の区切りが視覚的にわかりやすくなります。データ量の多い表ほど効果を実感しやすいテクニックです。

実務サンプル2（横スクロール対応のレスポンシブテーブル）

列数の多い表をスマホでそのまま表示すると、画面からはみ出して崩れてしまいます。<table> を div で囲み、overflow-x: auto; を指定することで、はみ出した分だけ横スクロールできるようにするのが定番の対処法です。

HTML

<div class="table-scroll">
    <table>
        <tr>
            <th>月</th>
            <th>売上</th>
            <th>粗利</th>
            <th>担当者</th>
            <th>備考</th>
        </tr>
        <tr>
            <td>1月</td>
            <td>120,000円</td>
            <td>48,000円</td>
            <td>田中</td>
            <td>キャンペーン実施</td>
        </tr>
    </table>
</div>

CSS

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll table {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px;
}

table 自体に min-width を指定しておくことで、画面幅が狭い端末でも表の中身が極端に詰まらず、必要な分だけ横にスクロールして閲覧できるようになります。