0

スタイルに関するいくつかの問題に直面しているデータ テーブルを作成しようとしています。

1) 発射していない TR に交互列を適用しようとしています。


各 TR ですべての TD にクラスを渡さずに交互スタイルを適用する方法はありますか?

2) Colgroup は IE8 で、特に調整を行っています (cols=A&SI Capital Allocation, Cap Var, A&SI Expense Allocation, Exp Var)

この問題を修正する方法はありますか

コードは次のとおりです。http://jsfiddle.net/yvJ75/1/

4

2 に答える 2

0

各 TR ですべての TD にクラスを渡さずに交互スタイルを適用する方法はありますか?

はい - のようにクラスを適用し、背景を適用する<tr class="even-row">ように css セレクターを使用できます。このアプローチは、すべてのブラウザーで機能します。 andを使用することもできますが、これはcss3 疑似クラスです。tr.even-row td<td>tr:nth-child(odd)tr:nth-child(even)

Colgroup は IE8 で、特に調整 (cols=A&SI Capital Allocation、Cap Var、A&SI Expense Allocation、Exp Var) で作業しています。この問題を修正する方法はありますか?

機能していないということですか？列は、境界線、背景、幅、および可視性の css プロパティのみを受け入れます。Td は、col 要素の直接の子孫ではないため、他のプロパティを継承しません (これについては、こちらを参照してください)。最も確実な方法は、td にクラスを設定し、それを介して td コンテンツのスタイルを設定することです。

于 2011-08-25T09:43:11.670 に答える
0

CSS3 疑似クラス nth-child(odd) および nth-child(even) を使用できます。

ここでコードを更新しました: http://jsfiddle.net/yvJ75/12/

これらはCSSの変更です

/*
.bg-oddrow {
    background-color:#fbfcfb !important;
}

.bg-evenrow {
    border-bottom:1px solid #dadada !important;
}*/
table tr:nth-child(odd) td{
    background-color:#fbfcfb !important;
}
table tr:nth-child(even) td{
    border-bottom:1px solid #dadada !important;
}
于 2011-08-25T09:43:22.247 に答える