Menggunakan CSS bagaimana mengubah hanya kolom ke-2 dari sebuah tabel

126

Hanya dengan menggunakan css, bagaimana saya bisa mengganti css hanya untuk kolom ke-2 dari sebuah tabel.

Saya bisa mendapatkan semua kolom menggunakan:

.countTable table table td

Saya tidak dapat mengakses html di halaman ini untuk memodifikasinya karena ini bukan situs saya.

Terima kasih.

css
sumber

Jawaban:

239

Anda dapat menggunakan :nth-childkelas pseudo seperti ini:

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

Namun perlu dicatat, ini tidak akan berfungsi di browser lama (atau IE), Anda harus memberi sel kelas atau menggunakan javascript dalam kasus itu.

Nick Craver
sumber
Ini hanya akan memberikan sel kedua di setiap tabel, bukan sel kedua di setiap baris. Anda membutuhkan. Tabel tabel hitung tr td: n-anak (2)
Deeksy
3
@ Deeksy - Itu tidak akurat, tidak peduli apa pemilihnya. nth-childditerapkan setelah menemukan elemen, dan itu nthdibandingkan dengan induk apa pun yang dimilikinya, tidak peduli apakah itu ada di pemilih atau tidak. Anda dapat melihat ini berfungsi di sini: jsfiddle.net/JQQPz
Nick Craver
bagaimana kalau mengubah hanya css dari sebuah elemen di dalam td: nth-child (2). Seperti tag <a>. apakah itu akan menjadi td a: nth-child (2) {}?
Ivo San
1
@ ivory-santos tambahkan saja adi akhir, misalnya td:nth-child(2) ake tautan gaya di bawah elemen itu.
Nick Craver
Mengapa Anda memiliki tabel dua kali (tidak seperti jawaban lain di bawah)?
UlFie
26

Coba ini:

.countTable table tr td:first-child + td

Anda juga dapat mengulangi untuk memberi gaya pada kolom lainnya:

.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
sumber
1
Saya memilih ini dalam situasi di mana pemilik situs yang memelihara kode bukanlah pengembang dan ini memberi mereka kemampuan untuk mengubah penyelarasan kolom dalam tabel data mereka dengan cara yang sangat mudah meskipun sedikit bertele-tele, dengan komentar seperti yang Anda miliki di sini, memudahkan mereka untuk mengetahui blok pemilih mana untuk kolom mana dari kiri. Sekali lagi bukan cara yang paling elegan dan efisien, tetapi berhasil!
Eric Bishard
18

Untuk mengubah hanya kolom kedua dari tabel gunakan yang berikut ini:

Kasus Umum:

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

background:red

}

Kasus Anda:

.countTable table table td + td{ 

background: red

}

Catatan: ini berfungsi untuk semua browser (Modern dan lama) itulah sebabnya saya menambahkan jawaban saya ke pertanyaan lama

Abzoozy
sumber
Apa yang akan dilakukan untuk memilih kolom pertama? Menggunakan tabel td {...} memilih semua sel di kolom lain juga.
j4v1
1
@ j4v1 table td {background: red;} // kolom pertama akan memiliki background tabel merah td + td {background: blue;} // sisanya akan berwarna biru
Abzoozy
-2

Anda bisa menentukan kelas untuk setiap sel di kolom kedua.

<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
sumber
Saya tidak bisa menggunakan ini. Seperti yang saya katakan, ini bukan halaman saya sehingga, saya tidak dapat mengubah html.
2
@Duniyadnd ini bukan pendekatan yang baik, dibandingkan dengan cara yang ada dalam menggunakan penyeleksi.
PM
-2

di web ini http://quirksmode.org/css/css2/columns.html saya menemukan cara yang mudah

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..
DorienCragen
sumber
1
Dia bilang dia tidak bisa memodifikasi HTML.
Frungi