【CSS Modules】empty-cellsプロパティの使い方

empty-cellsプロパティは、HTMLテーブル内の空のセルの表示方法を制御するためのプロパティです。このプロパティは、特にテーブルのボーダーモデルがseparate（ボーダーがセルごとに分離して表示される状態）に設定されている場合にその効果を発揮します。空のセルとは、テキストや画像などのコンテンツが全く含まれていない<td>または<th>要素のことです。

指定できる値には主にshowとhideがあります。showを指定した場合、空のセルであっても、そのセルに設定されたボーダーや背景が表示されます。これはempty-cellsプロパティの初期値でもあり、コンテンツがないセルでも視覚的にその存在が維持されます。一方、hideを指定すると、空のセルのボーダーや背景は表示されなくなります。これにより、そのセルが占めるはずだった領域が視覚的に消え、隣接するセルがその空間を利用して広がるように見えることがあります。

このプロパティは、<table>要素自体、またはテーブルの行グループ（<thead>、<tbody>、<tfoot>）に対して適用します。テーブルのデザインにおいて、コンテンツがないセルの扱いをどう見せるかを柔軟に調整したい場合に非常に有用です。例えば、データの欠損がある部分を目立たなくしたい場合などにhideを利用できます。

Copy
1table {
2  empty-cells: hide;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません