HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

エンプティ セルズ

empty-cellsプロパティ

内容を持たないセルの表示方法を指定するプロパティです。

  • 初期値

    show

  • 継承

    継承あり

  • 適用できる要素

    テーブルセル要素

次の値を指定することができます。

  • show – 空のセルを表示。初期値。
  • hide – 空のセルを非表示。
  • inherit – 親要素の設定を継承。

パターン1

値に「show」(初期値)を指定している例です。内容が空のセルも表示されます。

CSSコード例

<style>
.table1 {
	empty-cells: show;
}
</style>
<table class="table1">
	<tr>
		<th class="product_name">商品名</th>
		<th class="product_num">在庫数</th>
		<th class="product_price">価格</th>
	</tr>
	<tr>
		<td>ミネラルウォーター</td>
		<td>150本</td>
		<td>100円(税抜)</td>
	</tr>
	<tr>
		<td>コーラ</td>
		<td>100本</td>
		<td>140円(税抜)</td>
	</tr>
	<tr>
		<td>お茶</td>
		<td>200本</td>
		<td>130円(税抜)</td>
	</tr>
	<tr>
		<td>レモンティー</td>
		<td></td>
		<td></td>
	</tr>
</table>

表示例:

showの指定例

パターン2

値に「hide」を指定している例です。

CSSコード例

<style>
.table2 {
	empty-cells: hide;
}
</style>
<table class="table2">
	<tr>
		<th class="product_name">商品名</th>
		<th class="product_num">在庫数</th>
		<th class="product_price">価格</th>
	</tr>
	<tr>
		<td>ミネラルウォーター</td>
		<td>150本</td>
		<td>100円(税抜)</td>
	</tr>
	<tr>
		<td>コーラ</td>
		<td>100本</td>
		<td>140円(税抜)</td>
	</tr>
	<tr>
		<td>お茶</td>
		<td>200本</td>
		<td>130円(税抜)</td>
	</tr>
	<tr>
		<td>レモンティー</td>
		<td></td>
		<td></td>
	</tr>
</table>

表示例:

hideの指定例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。