CSS kullanarak bir tablonun yalnızca 2. sütunu nasıl değiştirilir

126

Yalnızca css kullanarak, bir tablonun yalnızca 2. sütunundaki css'yi nasıl geçersiz kılabilirim.

Şunu kullanarak tüm sütunlara ulaşabilirim:

.countTable table table td

Benim sitem olmadığı için bu sayfadaki html'ye ulaşamıyorum.

Teşekkürler.

css 

Yanıtlar:

239

:nth-childSözde sınıfı şu şekilde kullanabilirsiniz :

.countTable table table td:nth-child(2)

Bununla birlikte, bunun eski tarayıcılarda (veya IE) çalışmayacağını unutmayın, bu durumda hücrelere bir sınıf vermeniz veya javascript kullanmanız gerekir.

— Nick Craver
kaynak
Bu, her satırdaki ikinci hücreyi değil, her tablodaki yalnızca ikinci hücreyi verecektir. .CountTable table table'e ihtiyacınız var tr td: nth-child (2)
— Deeksy
3
@Deeksy - Bu doğru değil, seçicinin ne olduğu umurunda değil. nth-childöğe bululduktan sonra uygulanır nthve seçicide olup olmadığına bakılmaksızın sahip olduğu üst öğe ile karşılaştırılır. Bunu burada çalışırken görebilirsiniz: jsfiddle.net/JQQPz
— Nick Craver
td: nth-child (2) içindeki bir elemanın yalnızca css'sini değiştirmeye ne dersiniz? <a> etiketi gibi. td a: nth-child (2) {} mi olacak?
— Ivo San
1
@ ivory-santos sadece asonuna ekleyin , örneğin td:nth-child(2) abu öğenin altındaki stil bağlantılarına.
— Nick Craver
Neden iki kez tablonuz var (aşağıdaki diğer cevapların aksine)?
— UlFie
26

Bunu dene:

.countTable table tr td:first-child + td

Diğer sütunların stilini belirlemek için de yineleyebilirsiniz:

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */
— Marco Panichi
kaynak
1
Bunu, kodu koruyan site sahiplerinin geliştirici olmadığı bir durumda seçtim ve bu onlara veri tablolarındaki sütunların hizalamasını çok basit bir şekilde değiştirme olanağı verdi, biraz ayrıntılı olsa da, Burada, soldan hangi sütun için hangi seçici bloğun olduğunu bilmelerini kolaylaştırdık. Yine en şık ve verimli yol değil, ama işe yaradı!
— Eric Bishard
18

Bir tablonun yalnızca ikinci sütununu değiştirmek için aşağıdakileri kullanın:

Genel dava:

table td + td{  /* this will go to the 2nd column of a table directly */

background:red

}

Senin durumun:

.countTable table table td + td{ 

background: red

}

Not: Bu, tüm tarayıcılarda (Modern ve eski tarayıcılarda) işe yarıyor, bu yüzden cevabımı eski bir soruya ekledim

— Abzoozy
kaynak
İlk sütunu seçmek için ince ayar ne olur? Td tablosunu kullanmak {...} diğer sütunlardaki tüm hücreleri de seçer.
— j4v1
1
@ j4v1 table td {background: red;} // ilk sütunda kırmızı arkaplan tablosu olacak td + td {background: blue;} // geri kalanında mavi olacak
— Abzoozy
-2

İkinci sütundaki her hücre için bir sınıf atayabilirsiniz.

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>
— Duniyadnd
kaynak
Bunu kullanamam Dediğim gibi, bu benim sayfam değil ve bu yüzden html'yi değiştiremiyorum.
2
@Duniyadnd bu, seçicileri kullanmanın mevcut yöntemiyle karşılaştırıldığında iyi bir yaklaşım değil.
— PM
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.