web-dev-qa-db-ja.com

テーブルの最初の<td>列のスタイルを変更します

2つの列を持つtableがある場合、<td>sの最初の列にのみ適用されるようにpaddingまたは他のcssを指定するにはどうすればよいですか。また、n-th列を同様にスタイルするにはどうすればよいですか？

csscss-selectorspadding
55
Shalin

n番目の子セレクター を使用できます。

n番目の要素をターゲットにするには、次を使用できます。

td:nth-child(n) {  
  /* your stuff here */
}

（nは1から始まります）

119
RRikesh

IE7をサポートする必要がある場合、より互換性のあるソリューションは次のとおりです。

/* only the cells with no cell before (aka the first one) */
td {
    padding-left: 20px;
}
/* only the cells with at least one cell before (aka all except the first one) */
td + td {
    padding-left: 0;
}

liでも問題なく動作します。一般的な兄弟セレクタ~は、見出しh1の後に段落と小見出しが続き、再び他の段落が続くような混合要素に適している場合があります。

9
FelipeAls

これが役立つはずです。そのCSS3：first-childで、テーブルの最初のtrをスタイルすることを言う必要があります。 http://reference.sitepoint.com/css/pseudoclass-firstchild

4
tiantang

：nth-​​child（）および：nth-​​of-type（）疑似クラスを使用すると、式を使用して要素を選択できます。

構文は：nth-​​child（an + b）で、aとbを任意の数字に置き換えます。

たとえば、：nth-​​child（3n + 1）は、1番目、4番目、7番目などの子を選択します。

td:nth-child(3n+1) {  
  /* your stuff here */
}

：nth-​​of-type（）は同じように機能しますが、指定されたタイプの要素のみを考慮します（この例では）。

3
MS Ibrahim

テーブルの最初の列を選択するには、次の構文を使用できます

tr td：nth-​​child（1n + 2）{padding-left：10px;}

1
Saptarshi Banerjee