suzrinブログ
HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
テーブルをCSSで色々操作する考察
table関係で空白ますがあるとびとびの表を作る機会があったのでちょっとメモ
以下Firefox3での実験結果のまとめ
基本状態の画像
empty-cellsはborder-collapse:sepalate;
テーブルが分離モデルの時しか使えない
継承有り、初期値はshow
hideを指定するとtd、trで指定した背景、枠線共に消える
故にtableに指定したbackgroundまで見えるようになる
IEではshowすら満足に使えない（笑
↑showと笑で・・・OTZ
css3で実装予定のempty疑似クラスを使ってみる
要素内が空の時に効く疑似クラスで
td:empty {
visibility : hidden ;
}
とする
border-collapse:collapse;
でも当然使える
枠線は消えてtrのbackgroundが見えるようになる
故にtableのbackgroundは見えない
どちらにしろIEはｄｍｐ＼(＞ヮ＜)／
使用したサンプルコードは以下
=========CSS=========
table {
border-collapse : sepalate ;
background : #f0f0ff ;
/*
empty-cells : hide ;
*/
border-spacing : 10px ;
}
tr {
background : #f0fff0 ;
}
td {
background : #fff0f0 ;
border : 1px #000000 solid ;
height : 30px ;
width : 30px ;
}
/*
td:empty {
visibility : hidden ;
}
*/
============HTML===========
<body>
<table>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td></td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
</body>
以下Firefox3での実験結果のまとめ
基本状態の画像
empty-cellsはborder-collapse:sepalate;
テーブルが分離モデルの時しか使えない
継承有り、初期値はshow
hideを指定するとtd、trで指定した背景、枠線共に消える
故にtableに指定したbackgroundまで見えるようになる
IEではshowすら満足に使えない（笑
↑showと笑で・・・OTZ
css3で実装予定のempty疑似クラスを使ってみる
要素内が空の時に効く疑似クラスで
td:empty {
visibility : hidden ;
}
とする
border-collapse:collapse;
でも当然使える
枠線は消えてtrのbackgroundが見えるようになる
故にtableのbackgroundは見えない
どちらにしろIEはｄｍｐ＼(＞ヮ＜)／
使用したサンプルコードは以下
=========CSS=========
table {
border-collapse : sepalate ;
background : #f0f0ff ;
/*
empty-cells : hide ;
*/
border-spacing : 10px ;
}
tr {
background : #f0fff0 ;
}
td {
background : #fff0f0 ;
border : 1px #000000 solid ;
height : 30px ;
width : 30px ;
}
/*
td:empty {
visibility : hidden ;
}
*/
============HTML===========
<body>
<table>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td></td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
</body>
PR
この記事にコメントする
カレンダー
| 01 | 2025/02 | 03 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |
ブログ内検索
ツイッター
フリーエリア
１８歳未満には不適切な内容がある場合が有ります閲覧にはご注意ください。
詳しくはりーどみーをご覧くださいお願いします
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
カテゴリー
最新記事
(09/15)
(07/25)
(04/24)
(03/08)
(02/06)
(01/22)
(11/19)
(06/01)
(05/09)
(05/07)
最新トラックバック
カウンター
クロシェットさんの新作プリズムリコレクションからアイナちゃん！
ストレガさんの新作木洩れ陽のノスタルジーカのフロゥちゃん＼(＞ヮ＜)／
はいぺりよんさんのシストリのるなちー
フェイバリットさんの新作色とりどりのひかり！
Chuableさんの新作アステリズム 応援CHU
AXLさんの新作から月海ちゃん応援中！
Meteorさんの新作Princess-Styleから一宮菖蒲ちゃん応援中！
YUZU SOFTさんの新作とSAGAPLANETSさんの新作応援中！
loseさんの新作『ものべの』応援中！
Favoritさんの新作いろとりどりのセカイ
