サイト内検索
...スタイルシート(css)...
スタイルシート・table
セル内の境界線の表示方法
- 空白セルの境界線の表示方法
- 空白セルの境界線の表示・非表示には、empty-cellsプロパティを指定します。
- table要素・td要素・th要素に指定できます。
- [使い方]
- .sample{
empty-cells: show;
}
プロパティ名 | 値 | 説明 |
---|---|---|
empty-cells: | show; | 空白セルの境界線を表示します。 |
hide; | 空白セルの境界線を表示しません。 | |
visibility: | hidden; | 表示しません。 |
visible; | 表示します。 |
サンプル
《empty-cells:show;》 [headの中] <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> [bodyの中] <table><tr> <th class="sample1">No1</th> <th class="sample1">No2</th> </tr> <tr> <td class="hidden">No3</td> <td class="sample1">No4</td> </tr> </table> [ブラウザ上]
|
《empty-cells:hide;》 [headの中] <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> [bodyの中] <table><tr> <th class="sample2">No1</th> <th class="sample2">No2</th> </tr> <tr> <td class="sample2">No3</td> <td class="hidden">No4</td> </tr> </table> [ブラウザ上]
|