Feb. 17th,2021
プロパティについて
＃
概要
“empty-cells”プロパティは“border-collapse”プロパティの値が“separate”である場合に、内容のないセルのボーダーや背景を描画するかどうかを指定するプロパティです。
“border-collapse”プロパティの値が“collapse”である場合には“empty-cells”プロパティは意味を持ちません。
サンプルコード
table { empty-cells: hide;}
＃
値
| 値 | 説明 |
|---|---|
| show | 空白セルの境界線と背景を描画する (空白でないセルと同様に描画されます。) |
| hide | 空白セルの境界線と背景を描画しない (行のすべてのセルが空白である場合、その行の高さは“0”となり、垂直方向の境界線の間隔は片側だけ空けられます。) |
| 共通キーワード |
＃
使用例
＃
空白セルを表示する
table {
border-collapse: separate;
empty-cells: show;
}
<table>
<tr>
<th>会員番号</th>
<th>名前</th>
<th>住所</th>
</tr>
<tr>
<td>001</td>
<td>アザラシ</td>
<td>北極</td>
</tr>
<tr>
<td>002</td>
<td></td>
<td>南極</td>
</tr>
<tr>
<td>003</td>
<td>シャチ</td>
<td></td>
</tr>
</table>
| 会員番号 | 名前 | 住所 |
|---|---|---|
| 001 | アザラシ | 北極 |
| 002 | 南極 | |
| 003 | シャチ |
＃
空白セルを表示しない
table {
border-collapse: separate;
empty-cells: hide;
}
<table>
<tr>
<th>会員番号</th>
<th>名前</th>
<th>住所</th>
</tr>
<tr>
<td>001</td>
<td>アザラシ</td>
<td>北極</td>
</tr>
<tr>
<td>002</td>
<td></td>
<td>南極</td>
</tr>
<tr>
<td>003</td>
<td>シャチ</td>
<td></td>
</tr>
</table>
| 会員番号 | 名前 | 住所 |
|---|---|---|
| 001 | アザラシ | 北極 |
| 002 | 南極 | |
| 003 | シャチ |
