CSSのempty-cellsでテーブル内の空のセルの表示・非表示を制御し、レイアウトを調整する方法をわかりやすく解説

empty-cellsプロパティは、テーブル内の空のセル（内容がないセル）を表示するかどうかを制御します。このプロパティを使用することで、空のセルを表示するか隠すかを指定できます。

empty-cellsプロパティの値とその効果

• show: 空のセルを表示します。セルの枠や背景が表示されます。
• hide: 空のセルを隠します。セルの枠や背景が表示されません。

注意点と関連情報

empty-cellsプロパティは、テーブルのデザインやレイアウトに大きな影響を与えます。特に、空のセルが多いテーブルでは、セルが隠れることで見た目がすっきりしますが、データの配置が不明瞭になる可能性があります。また、empty-cellsプロパティは、テーブル内のセルに対してのみ適用されるため、他の要素には影響しません。

empty-cellsプロパティが効かない時の原因と対策

表以外の要素に適用されている

empty-cellsプロパティは、HTMLのtable要素内のセルに対してのみ機能します。非テーブル要素やテーブル以外のレイアウトには効果がありません。
対策: empty-cellsプロパティを適用する要素がテーブル内のセル（tdやth）であることを確認し、表以外の要素に適用しないようにしてください。

border-collapse: collapseが適用されていない

empty-cellsプロパティは、テーブルにborder-collapse: collapse;が指定されている場合にのみ効果を発揮します。この指定がないと、空のセルが表示されないことがあります。
対策: border-collapseプロパティをcollapseに設定しているか確認し、適切にテーブルの境界が折りたたまれるようにしてください。これにより、empty-cellsプロパティが正しく機能するようになります。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #333;
        background-color: #f9f9f9;
        font-size: 16px;
        color: #333;
        box-sizing: border-box;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    td, th {
        border: 1px solid #333;
        padding: 10px;
        text-align: center;
    }
    

empty-cells: show

empty-cells: showは、テーブル内の空のセルを表示します。セルの枠や背景が表示されます。

HTMLコード

<table class="css-sample-container css-sample-empty-cells-show">
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td></td>
    </tr>
    <tr>
        <td>B1</td>
        <td></td>
        <td>B3</td>
    </tr>
</table>

CSSコード

.css-sample-empty-cells-show {
    empty-cells: show;
}

表示結果

empty-cells: hide

empty-cells: hideは、テーブル内の空のセルを隠します。セルの枠や背景が表示されなくなります。

HTMLコード

<table class="css-sample-container css-sample-empty-cells-hide">
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td></td>
    </tr>
    <tr>
        <td>B1</td>
        <td></td>
        <td>B3</td>
    </tr>
</table>

CSSコード

.css-sample-empty-cells-hide {
    empty-cells: hide;
}

表示結果

まとめ

empty-cellsプロパティを使用すると、テーブル内の空のセルを表示するか隠すかを簡単に制御できます。showを使用する場合、空のセルでも枠や背景が表示されますが、hideを使用すると、セル自体が完全に隠されます。どちらを使うかは、テーブルのデザインやデータの見やすさに応じて選択しましょう。