empty-cells
CSS の empty-cells
プロパティは、目に見える内容を持たない表のセルの、周囲の境界と背景をユーザーエージェントがどのように描画するかを指定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
このプロパティは、 border-collapse
プロパティが separate
の場合のみ効果があります。
構文
/* キーワード値 */
empty-cells: show;
empty-cells: hide;
/* グローバル値 */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;
empty-cells
プロパティは、以下のキーワード値のうちの一つで指定します。
値
show
- 通常のセルのように、境界や背景を描くことを示すキーワードです。
hide
- 境界や背景を描かないことを示すキーワードです。
例
show | hide
例
HTML
<table class="table_1">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
<br>
<table class="table_2">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
CSS
.table_1 {
empty-cells: show;
}
.table_2 {
empty-cells: hide;
}
td,
th {
border: 1px solid gray;
padding: 0.5rem;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Level 2 (Revision 1) empty-cells の定義 |
勧告 |
初期値 | show |
---|---|
適用対象 | 表のセル要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。