[新着] Webテンプレートを仮オープンしました
empty-cells は、空白セルの枠線の表示・非表示を指定するプロパティです。内容が空のセルと、visibility プロパティで hidden が指定されたセルが対象となります。
table、td要素やth要素にこのスタイルを設定することができます。
※border-collapse プロパティで separate（間隔をあけて表示）が設定されている場合に有効です。
table {
empty-cells: hide;
}
| empty-cells | show … （空白セルの枠線を表示します）デフォルト |
|---|---|
| hide … （空白セルの枠線を表示しません） |
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
table {
width: 200px;
border: 2px #2b2b2b solid;
border-collapse: separate;
margin-bottom: 20px;
}
td, th {
border: 2px #2b2b2b solid;
}
#example1 {
empty-cells: show;
}
#example2 {
empty-cells: hide;
}
.hidden {
visibility: hidden;
}
-->
</style>
</head>
<body>
<table id="example1">
<tr>
<th colspan="2">showを指定</th>
</tr>
<tr>
<td>内容1</td>
<td></td>
</tr>
<tr>
<td class="hidden">内容2</td>
<td>内容3</td>
</tr>
</table>
<table id="example2">
<tr>
<th colspan="2">hideを指定</th>
</tr>
<tr>
<td>内容1</td>
<td></td>
</tr>
<tr>
<td class="hidden">内容2</td>
<td>内容3</td>
</tr>
</table>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| showを指定 | |
|---|---|
| 内容1 | |
| 内容2 | 内容3 |
| hideを指定 | |
|---|---|
| 内容1 | |
| 内容2 | 内容3 |
