suzrinブログ

HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど

<< IE8RC1を入れてみて早速バグがあって驚愕 HOME 秋葉原のまんだらけが凄いことに >>

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/26 (Fri)

テーブルを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>

2009/02/17 (Tue) HTML Trackback() Comment(0)