CSSで要素の表示、非表示の切り替えをするコードを紹介します。
表示領域を確保しつつ、要素を非表示にするには、CSSのvisibility プロパティを利用します。
visibility:(値);
値には以下が利用できます。
| 値 | 意味 |
|---|---|
| visible | 要素を表示します。 |
| hidden | 要素を非表示にします。 |
| collapse | テーブルの行や列に設定した場合、設定した要素を詰めて表示します。 |
visibility:collapse を用いたテーブルの例を紹介します。
以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="table.css" />
</head>
<body>
<table class="tablestyle">
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr class="collapsestyle">
<td>123</td>
<td>456</td>
<td>789</td>
</tr>
<tr>
<td>あかさ</td>
<td>たなは</td>
<td>まやら</td>
</tr>
</table>
</body>
</html>
.tablestyle {
border: solid 1px #0094ff;
}
.tablestyle tr td {
border: solid 1px #0094ff;
}
.collapsestyle {
visibility: collapse;
}
上記のHTMLファイルをWebブラウザで開きます。下図の表示結果が得られます。2行目の"123" "456" "789" が非表示になっていることがわかります。また、行が詰められていることも確認できます。
なお、visibility:hidden; の場合は下図の結果になり、行は詰まりません。
display:none; にした場合は下図の結果になります。行が詰まります。
以下のHTML, CSSファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="table.css" />
</head>
<body>
<table class="tablestyle">
<tr>
<td>ABC</td>
<td class ="collapsestyle">DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>123</td>
<td class="collapsestyle">456</td>
<td>789</td>
</tr>
<tr>
<td>あかさ</td>
<td class="collapsestyle">たなは</td>
<td>まやら</td>
</tr>
</table>
</body>
</html>
.tablestyle {
border:solid 1px #0094ff;
}
.tablestyle tr td{
border:solid 1px #0094ff;
}
.collapsestyle {
visibility:collapse;
}
列を非表示にした場合は、列は詰まりません。
なお、visibility:hidden; の場合は下図の結果になり、列は詰まりません。
display:none; にした場合は下図の結果になります。列が詰まります。
