Sử dụng CSS làm thế nào để chỉ thay đổi cột thứ 2 của bảng

124

Chỉ sử dụng css, làm cách nào tôi có thể ghi đè lên css chỉ cột thứ 2 của bảng.

Tôi có thể đến tất cả các cột bằng cách sử dụng:

.countTable table table td

Tôi không thể truy cập html trên trang này để sửa đổi vì đây không phải là trang của tôi.

Cảm ơn.

css

238

Bạn có thể sử dụng :nth-childlớp giả như thế này:

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

Tuy nhiên, xin lưu ý rằng điều này sẽ không hoạt động trong các trình duyệt cũ hơn (hoặc IE), bạn sẽ cần cung cấp cho các ô một lớp hoặc sử dụng javascript trong trường hợp đó.

— Nick Craver
nguồn

Điều này sẽ chỉ cung cấp ô thứ hai trong mỗi bảng chứ không phải ô thứ hai trong mỗi hàng. Bạn cần .countTable bảng bảng tr td: nth-child (2)

— Deeky

3

@Deeky - Điều đó không chính xác, nó không quan tâm bộ chọn là gì. nth-childđược áp dụng sau khi tìm thấy phần tử và nó được nthso sánh với bất kỳ phần tử cha mẹ nào có, bất kể nó có trong bộ chọn hay không. Bạn có thể thấy điều này hoạt động ở đây: jsfiddle.net/JQQPz

— Nick Craver

làm thế nào về việc chỉ thay đổi css của một phần tử bên trong td: nth-child (2). Giống như thẻ <a>. nó sẽ là td a: nth-child (2) {}?

— Ivo San

1

@ ivory-santos chỉ cần thêm aphần cuối, ví dụ: td:nth-child(2) aliên kết kiểu bên dưới phần tử đó.

— Nick Craver

Tại sao bạn có bảng hai lần (không giống như các câu trả lời khác bên dưới)?

— UlFie

26

Thử cái này:

.countTable table tr td:first-child + td

Bạn cũng có thể nhắc lại để tạo kiểu cho các cột khác:

.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
nguồn

1

Tôi đã chọn điều này trong tình huống chủ sở hữu trang web duy trì mã không phải là nhà phát triển và điều này cho họ khả năng thay đổi sự liên kết của các cột trong bảng dữ liệu của họ theo cách rất thẳng mà mặc dù hơi dài dòng, với nhận xét như bạn có ở đây, giúp họ dễ dàng biết khối chọn nào cho cột bên trái. Một lần nữa không phải là cách thanh lịch và hiệu quả nhất, nhưng nó đã làm việc!

— Eric Bishard

18

Để chỉ thay đổi cột thứ hai của bảng, hãy sử dụng như sau:

Trường hợp chung:

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

background:red

}

Trường hợp của bạn:

.countTable table table td + td{ 

background: red

}

Lưu ý: điều này hoạt động cho tất cả các trình duyệt (Hiện đại và cũ) đó là lý do tại sao tôi đã thêm câu trả lời của mình cho một câu hỏi cũ

— Abzoozy
nguồn

Điều gì sẽ là các tinh chỉnh để chỉ chọn cột đầu tiên? Sử dụng bảng td {...} cũng chọn tất cả các ô trong các cột khác.

— j4v1

1

@ j4v1 bảng td {nền: đỏ;} // cột đầu tiên sẽ có bảng nền đỏ td + td {nền: xanh;} // phần còn lại sẽ có màu xanh

— Abzoozy

-2

Bạn có thể chỉ định một lớp cho mỗi ô trong cột thứ hai.

<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
nguồn

Tôi không thể sử dụng cái này. Như tôi đã nói, đây không phải là trang của tôi và vì vậy, tôi không thể thay đổi html.

2

@Duniyadnd đây không phải là một cách tiếp cận tốt, so với cách sử dụng bộ chọn hiện có.

— PM

-2

trên trang web này http://quirksmode.org/css/css2/columns.html tôi thấy cách đó dễ dàng

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..

— DorienCragen
nguồn

1

Ông nói rằng ông không thể sửa đổi HTML.

— Frungi 7/2/2015