忍者ブログ

suzrinブログ

HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど
<< IE8RC1を入れてみて早速バグがあって驚愕 HOME 秋葉原のまんだらけが凄いことに >>

[PR]

×

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

テーブルをCSSで色々操作する考察

table関係で空白ますがあるとびとびの表を作る機会があったのでちょっとメモ
以下Firefox3での実験結果のまとめ

基本状態の画像

suzrin255.jpg

empty-cellsはborder-collapse:sepalate;
テーブルが分離モデルの時しか使えない

継承有り、初期値はshow

hideを指定するとtd、trで指定した背景、枠線共に消える
故にtableに指定したbackgroundまで見えるようになる

suzrin257.jpg


IEではshowすら満足に使えない(笑
↑showと笑で・・・OTZ

css3で実装予定のempty疑似クラスを使ってみる
要素内が空の時に効く疑似クラスで
td:empty {
visibility : hidden ;
}
とする
border-collapse:collapse;
でも当然使える

suzrin256.jpg

枠線は消えてtrのbackgroundが見えるようになる
故にtableのbackgroundは見えない

どちらにしろIEはdmp\(>ヮ<)/

使用したサンプルコードは以下
=========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
この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
カレンダー
05 2017/06 07
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 29 30
ブログ内検索
ツイッター
フリーエリア
18歳未満には不適切な内容がある場合が有ります閲覧にはご注意ください。 詳しくはりーどみーをご覧くださいお願いします
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
最新コメント
[06/24 kz]
[10/16 haru]
[10/12 haru]
[06/08 nshi]
[11/15 まつかわ]
最新トラックバック
カウンター
クロシェットさんの新作プリズムリコレクションからアイナちゃん!
【プリズム◇リコレクション!】情報ページ公開中!
ストレガさんの新作木洩れ陽のノスタルジーカのフロゥちゃん\(>ヮ<)/
『木洩れ陽のノスタルジーカ』応援中です!
はいぺりよんさんのシストリのるなちー
シストリ抱き枕注文受付中!
フェイバリットさんの新作色とりどりのひかり!
いろとりどりのヒカリ 応援中!!
Chuableさんの新作アステリズム 応援CHU
姉さんに恋をして、姉さんも恋をして、姉さんと恋をした。 アステリズム 応援中!
AXLさんの新作から月海ちゃん応援中!
AXL新作第8弾 2012年春発売予定!
Meteorさんの新作Princess-Styleから一宮菖蒲ちゃん応援中!
『Princess-Style』応援中です
YUZU SOFTさんの新作とSAGAPLANETSさんの新作応援中!
はつドラ合同バナーキャンペーン開催中
loseさんの新作『ものべの』応援中!
ものべの - 夏葉
Favoritさんの新作いろとりどりのセカイ
いろとりどりのセカイ 応援中!!
<< IE8RC1を入れてみて早速バグがあって驚愕 HOME 秋葉原のまんだらけが凄いことに >>
忍者ブログ [PR]