Firefoxで<col>とCSSを使用して列にパディングを適用するにはどうすればよいですか？

例：Firefoxで<col>とCSSを使用して列にパディングを適用するにはどうすればよいですか？

<style type="text/css"> 
    table { 
     border: 1px solid red; 
     border-collapse: collapse; 
     text-align: left; 
    } 
    #col-1 { 
     padding-left: 20px; 
     background-color: tan; 
    } 
    #specific-cell { 
     padding-left: 20px; 
    } 
</style> 
<table> 
    <col id="col-1"> 
    <col id="col-2"> 
    <tr> 
     <th>foo</th> 
     <th>bar</th> 
    </tr> 
    <tr> 
     <td>data1</th> 
     <td>data2</th> 
    </tr> 
    <tr> 
     <td id="specific-cell">data1</th> 
     <td>data2</th> 
    </tr> 
    <tr> 
     <td>data1</th> 
     <td>data2</th> 
    </tr> 
</table>

色をカラムなくパディングに適用されます。私がクラス/ IDを直接セルに使用すると、それは機能します。

私はそれらを強制的に使用していますか、または<col>タグを利用する方法はありますか？

出典

2009-05-15 mark

それは動作するはずです少なくともCSS 2.1で。 CSS 2.1 table columns specificationをご覧ください。

あなたは:first-childと+を使用することによって、これを回避することができます：それはコラムの多くのために非常にスケーラブルではないですし、すぐに読みにくくなった以外

/* first column */ 
td:first-child { 
    padding-left: 20px; 
} 

/* second column */ 
td:first-child + td { 
    padding-left: 10px; 
} 

/* third columns */ { 
td:first-child + td + td { 
    padding-left: 0; 
}

出典

2009-05-15 11:55:51 amain

非常に洞察力のある答え、ありがとう！ – mark

この次のDOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

とスタイルを使用している...と何のブラウザを使用しているどのようなDOCTYPE

#col-1 { 
    padding-left: 50px; 
    background-color: tan; 
} 
#col-2 { 
    padding-left: 100px; 
    background-color: lightgreen; 
}

とIEで私の作品...

hmm ...ちょうどチェックされていないFirefoxで動作するように思わない

出典

2009-05-15 10:58:43

：親

例の第二<p>要素であるすべての<p>の要素を選択しますごめんなさい。はい、FFです。質問に追加しました。 – mark

アレックスの答えは、私のために動作します。代わりに:nth-of-type(n)を使用しましたが、このセレクタはCSS3で導入されました。

セレクター：:nth-of-type(n)
例：p:nth-of-type(2)
結果：私はどのように役に立たないブラウザ情報なし、

/*column 1*/ 
#myTable td:nth-of-type(1) 
{ 
    padding-left: 20px; 
    background-color: tan; 
} 
/*column 2*/ 
#myTable td:nth-of-type(2) 
{ 
    padding-left: 10px; 
}

出典

2013-11-12 20:17:26 johntrepreneur

Firefoxで<col>とCSSを使用して列にパディングを適用するにはどうすればよいですか？

答えて

関連する問題