忍者ブログ

suzrinブログ

HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど
<< ケンウッドのCORE-A55設置 HOME ATH-W1000Xを試聴してきた感想 >>

[PR]

×

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

HTMLのTABLEを縦に縞々(縦縞でCSSハック使わない編)

縞々は好きですか?
ジークしましま!

自分用メモ!
tableの列を縞々・文字寄せ・ボールドかけしたいときー

td:nth-child(even) {
background : #fff0f0 ;
}

td:nth-child(odd)  {
background : #ffffff ;
}

等でIE以外のCSS3対応ブラウザはピンクの縞々

IE6とIE7はcolのバグを使って
<coL class="c01"><col class="c02><col class="c03">・・・
とhtmlに仕込んでおいて

.co1 td, .c03 td {
background : #fff0f0f0 ;
}

.col02 td, .col04 td {
background : #ffffff ;
}

でピンクの縞々

それ以外のIE8とかには
一列めはtd
ニ列めはtd+td
三列めはtd+td+td・・・

って隣接セレクタを使ってずらずら上書きしていけばOK

みそはcolに対してCSSを書いてもtdはcolの子孫要素じゃないのでbackground・widthとか
限定されたプロパティしか効かないのにIE(笑)は効いちゃうからそれを存分に利用しよう
という話

しましまばんざい

PR
この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
カレンダー
04 2017/05 06
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 31
ブログ内検索
ツイッター
フリーエリア
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さんの新作いろとりどりのセカイ
いろとりどりのセカイ 応援中!!
<< ケンウッドのCORE-A55設置 HOME ATH-W1000Xを試聴してきた感想 >>
忍者ブログ [PR]