CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのempty-cellsプロパティを使ってテーブルの空セルを表示・非表示にする方法

CSSの empty-cells プロパティは、HTMLテーブル内の「空のセル（中身がないセル）」をどのように表示するかを指定するためのプロパティです。テーブルの見た目を整えたいとき、空セルの枠線や背景を表示するか非表示にするかを簡単に制御できます。

指定できる主な値は以下の2つです。

  • show：空セルにも枠線や背景を通常どおり表示します（初期値）。
  • hide：空セルの枠線や背景を非表示にします。

構文（Syntax）

empty-cellsプロパティの基本的な書き方は次のとおりです。

Selector {
    empty-cells: /*値*/
}

サンプルコード1：show と hide の違いを確認する

次の例では、2つのテーブルを用意し、それぞれ empty-cells: show と empty-cells: hide を適用して、表示の違いを比べられるようにしています。

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
    border: groove;
}
table {
    display: inline-block;
}
#demo1 {
    empty-cells: show;
}
#demo2 {
    empty-cells: hide;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<table id="demo1">
<tr>
<th colspan="3">Demo</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Six</td>
</tr>
<tr>
<td></td>
<td>Eight</td>
<td></td>
</tr>
</table>
<table id="demo2">
<tr>
<th colspan="3">Demo</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Six</td>
</tr>
<tr>
<td></td>
<td>Eight</td>
<td></td>
</tr>
</table>
</body>
</html>

実行結果

このコードを実行すると、次のような出力が得られます。左側のテーブル（show）では空セルにも枠線が表示され、右側のテーブル（hide）では空セルの枠線が消えていることがわかります。

CSSのempty-cellsプロパティを使ってテーブルの空セルを表示・非表示にする方法

サンプルコード2：スタイルを装飾した応用例

次の例では、枠線やパディング、ボックスシャドウを追加したテーブルに対して empty-cells プロパティを適用しています。hide を指定したテーブルでは、空セルの境界線が描画されず、すっきりとした見た目になります。

<!DOCTYPE html>
<html>
<head>
<style>
table * {
    border: ridge skyblue;
    padding: 0.5rem;
}
table {
    margin: 20px;
    display: inline-block;
    box-shadow: 0 0 6px 3px green;
}
#demo1 {
    empty-cells: hide;
}
#demo2 {
    empty-cells: show;
}
</style>
</head>
<body>
<table id="demo1">
<tr>
<th colspan="3">Hide</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table id="demo2">
<tr>
<th colspan="3">Show</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

実行結果

このコードを実行すると、次のような出力が得られます。

CSSのempty-cellsプロパティを使ってテーブルの空セルを表示・非表示にする方法

まとめ

empty-cells プロパティは、テーブルの空セルの扱いを show / hide の2つの値で直感的に制御できる便利な機能です。データが入っていないセルを視覚的に目立たせたくない場合や、逆にグリッド全体を均一に見せたい場合など、デザインの意図に合わせて使い分けるとよいでしょう。

  1. CSSで比較表を作成する方法｜レスポンシブ対応のサンプルコード付きで解説

    CSSを使えば、画面幅に合わせて自動的に調整されるレスポンシブ対応の比較表を簡単に作成できます。料金プランやサービス機能の比較など、さまざまな場面で活用できるので、実装方法をマスターしておくと便利です。ここでは、実際のコード例をもとに、見やすく整った比較表の作り方を詳しく解説します。 比較表のサンプルコード 以下が、CSSでレスポンシブな比較表を作成するための完全なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=devic

  2. CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

    CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。レスポンシブテーブルのポイントレスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。width: 100%;