サイト内検索
...スタイルシート(css)...
スタイルシート・ｔａｂｌｅ
セル内の境界線の表示方法
- 空白セルの境界線の表示方法
- 空白セルの境界線の表示・非表示には、empty-cellsプロパティを指定します。
- table要素・td要素・th要素に指定できます。
- [使い方]
- .sample{
empty-cells: show;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| empty-cells: | show; | 空白セルの境界線を表示します。 |
| hide; | 空白セルの境界線を表示しません。 | |
| visibility: | hidden; | 表示しません。 |
| visible; | 表示します。 |
サンプル
|
《empty-cells:show;》 [ｈｅａｄの中] <style type="text/css"><!-- table{ width: 200px; border: 1px #999999 solid; border-collapse: separate; } td, th{ border:1px #999999 solid; } .sample1{ empty-cells: show; } .hidden{ visibility: hidden; } --> </style> [ｂｏｄｙの中] <table><tr> <th class="sample1">Ｎｏ１</th> <th class="sample1">Ｎｏ２</th> </tr> <tr> <td class="hidden">Ｎｏ３</td> <td class="sample1">Ｎｏ４</td> </tr> </table> [ブラウザ上]
|
《empty-cells:hide;》 [ｈｅａｄの中] <style type="text/css"><!-- table{ width: 200px; border: 1px #999999 solid; border-collapse: separate; } td ,th{ border: 1px #999999 solid; } .sample2{ empty-cells: hide; } .hidden{ visibility: hidden; } --> </style> [ｂｏｄｙの中] <table><tr> <th class="sample2">Ｎｏ１</th> <th class="sample2">Ｎｏ２</th> </tr> <tr> <td class="sample2">Ｎｏ３</td> <td class="hidden">Ｎｏ４</td> </tr> </table> [ブラウザ上]
|
