visibility: collapse;
- ブラウザ
- 特性
- visibility
visibility は、表示・非表示を指定するプロパティです。
このプロパティ（値 collapse）を表の行・行グループ、列・列グループに対して設定すると、その範囲を詰めて表示することができます。
tr.example {
visibility: collapse;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| visibility | collapse | 表の行または列を詰める |
■適用可能な要素について
このスタイルは次の要素に適用することができます。
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, td, th {
border: 2px #2b2b2b solid;
}
tr.example1 {
visibility: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr class="example1">
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>
</body>
</html>
表示例
| 見出しセル1 | 見出しセル2 | 見出しセル3 |
|---|---|---|
| データセル1-1 | データセル1-2 | データセル1-3 |
| データセル2-1 | データセル2-2 | データセル2-3 |
| データセル3-1 | データセル3-2 | データセル3-3 |
■列を詰めた例
<!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, td, th {
border: 2px #2b2b2b solid;
}
col.example2 {
visibility: collapse;
}
</style>
</head>
<body>
<table>
<col span="1">
<col span="1" class="example2">
<col span="1">
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr>
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>
</body>
</html>
表示例
| 見出しセル1 | 見出しセル2 | 見出しセル3 |
|---|---|---|
| データセル1-1 | データセル1-2 | データセル1-3 |
| データセル2-1 | データセル2-2 | データセル2-3 |
| データセル3-1 | データセル3-2 | データセル3-3 |
- サイト内検索
