【CSS】empty-cells - 表の空セルの振る舞い

CSSのempty-cellsプロパティについて解説します。

検証環境

CSS

macOS

14.1

empty-cells

empty-cellsは“表の空セルの振る舞い”のプロパティです。

基本構文

empty-cells: 値;

値

代表的な値は次の通りです。

値	意味
show	表示
hide	非表示

サンプル

show

sample.html

<style>
table {
    ___ih_hl_start
    empty-cells: show;
    ___ih_hl_end
}
td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <td>Language</td>
        <td>Type</td>
    </tr>
    <tr>
        <td>HTML</td>
        <td></td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Programming</td>
    </tr>
    <tr>
        <td></td>
        <td>Programming</td>
    </tr>
</table>

プレビュー

hide

hideは非表示になりますが、領域は確保されます。

sample.html

<style>
table {
    ___ih_hl_start
    empty-cells: hide;
    ___ih_hl_end
}
td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <td>Language</td>
        <td>Type</td>
    </tr>
    <tr>
        <td>HTML</td>
        <td></td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Programming</td>
    </tr>
    <tr>
        <td></td>
        <td>Programming</td>
    </tr>
</table>

プレビュー