2012-03-04 6 views
7

行にCSSクラスを与えたいと思います。 と私は最初の列を黒とし、2番目の列を赤にしたいと思います。 テーブル全体ではなく、行固有のアクションであるため、colgroupを使用する必要はありません。おかげさまで 行の最初の列を黒と二番目の列を赤にする方法

+1

あなただけの各セルにCSSを持つクラスとスタイルを与えることはできませんか? – AlexKempton

答えて

7

あなたは使用することができますCSS3で

td { color: black; } 
td:nth-child(2) { color: red; } 
+0

CSS3がないとブラウザのサポートが改善されません。 – Smamatti

1

2種類のCSSを作成する必要があります。
各行に、必要なCSSを追加します。

+0

1 /どのタイプのCSSですか?あなたはCSSルールを意味しますか? 2 /各行の最初の2つのセルにスタイル属性を追加すると言っていますか?可能であればHTMLとCSSを分離してください(これは可能です) – FelipeAls

+0

このCSSは今後も再利用できます – Ofer

1

はあなたが:nth-child()擬似クラスを使用することができます。

8

これはCSS3なしでも可能です!

サンプル
http://jsfiddle.net/Q3yu5/1/

CSS

tr.special_row td { 
    background-color: #000; 
} 

tr.special_row td + td { 
    background-color: #f00; 
} 

tr.special_row td+td+td { 
    background-color: #fff; 
} 

HTML

<table> 
<tr class="special_row"> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
</tr> 
<tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
</tr> 
</table> 
+0

+1、これはおそらく 'nth-child'よりも優れています。 – Qtax

+1

これはまさに@rematnarabが探していたものではないのではないかと心配しています。私はテーブル全体が影響を受けてはならないことを覚えていませんでした。より特定のルールに 'tr'を編集しました。 – Smamatti

+0

ちょうど注記:私はあなたの**前の**バージョンのコードを必要としていました。レビューログの+1 –

1

...これは、テーブル全体ではなく、行に固有のアクションです。

そして、任意の行のあなたの第一および第二の列に異なるスタイルを適用することは有用である可能性:

<style type="text/css"> 
    td.first 
    { 
     background-color: black; 
     color: white; 
    } 
    td.second 
    { 
     background-color: red; 
     color: white; 
    } 
</style> 
<table> 
    <tr> 
     <td class="first">1st row, 1st column</td> 
     <td class="second">1st row, 2nd column</td> 
    </tr> 
    <tr> 
     <td>2nd row, 1st column</td> 
     <td>2nd row, 2nd column</td> 
    </tr> 
</table> 
+0

+1おっと。あなたが正しいです! - > 'テーブル全体を有効にするべきではない' – Smamatti

関連する問題