empty-cells: ***;
- ブラウザ
- 特性
- empty-cells
empty-cells は、空セルの境界線の表示・非表示を指定するプロパティです。
このスタイルはtd要素とth要素に適用することができます。このプロパティをtable要素に設定した場合は、その表内の全てにセルに適用されることになります。
※この指定は、border-collapseプロパティで separate（境界線を分離）を指定している場合に有効です。
table {
empty-cells: hide;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| empty-cells | show | 空セルの境界線を表示する （初期値） |
| hide | 空セルの境界線を表示しない |
IEでは、表示モードが「標準モード」の場合のみ機能するようです。（IE 7以下では未対応）
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
table {
margin-bottom: 20px;
border: 2px #2b2b2b solid;
border-collapse: separate;
}
td, th {
border: 2px #2b2b2b solid;
}
table.example1 {
empty-cells: show;
}
table.example2 {
empty-cells: hide;
}
</style>
</head>
<body>
<table class="example1">
<tr>
<th colspan="2">showを指定</th>
</tr>
<tr>
<td>データセル1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>データセル2</td>
</tr>
</table>
<table class="example2">
<tr>
<th colspan="2">hideを指定</th>
</tr>
<tr>
<td>データセル1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>データセル2</td>
</tr>
</table>
</body>
</html>
表示例
| showを指定 | |
|---|---|
| データセル1 | |
| データセル2 | |
| hideを指定 | |
|---|---|
| データセル1 | |
| データセル2 | |
- サイト内検索
