Chỉ sử dụng css, làm thế nào tôi có thể ghi đè lên css của chỉ cột thứ hai của bảng.Sử dụng CSS làm cách nào để chỉ thay đổi cột thứ 2 của bảng
tôi có thể nhận được cho tất cả các cột sử dụng:
.countTable table table td
tôi không thể đến được với các html trên trang này để sửa đổi nó vì nó không phải là trang web của tôi.
Cảm ơn.
Bạn có thể sử dụng lớp :nth-child giả như thế này:
.countTable table table td:nth-child(2)
Lưu ý tuy nhiên, điều này sẽ không làm việc trong các trình duyệt cũ (hoặc IE), bạn sẽ cần phải cung cấp cho các tế bào một lớp hoặc sử dụng javascript trong trường hợp đó.
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>
Tôi không thể sử dụng điều này. Như tôi đã nói, đây không phải trang của tôi và vì vậy, tôi không thể thay đổi html. –
@Duniyadnd đây không phải là một cách tiếp cận tốt, so với cách hiện tại của việc sử dụng bộ chọn. –
Hãy thử điều 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ộ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 */
Tôi đã chọn điều này trong trường hợp 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 căn chỉnh các cột trong bảng dữ liệu theo cách rất thẳng mà mặc dù có một chút tiết, với nhận xét như bạn có ở đây, giúp họ dễ dàng biết được khối chọn nào cho cột nào 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! –
Để thay đổi duy nhất cột thứ hai của một bảng 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 ý: Công việc này cho tất cả các trình duyệt (những người hiện đại và cũ) đó là lý do tại sao tôi đã thêm câu trả lời của tôi để một câu hỏi cũ
Điều gì sẽ là 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
@ j4v1 bảng td {background: red;} // cột đầu tiên sẽ có nền màu đỏ bảng td + td {background: blue;} // phần còn lại sẽ có màu xanh – Abzoozy
lol tất cả mọi người và ưa thích không cần thiết của họ – Unrelated
trên web này http://quirksmode.org/css/css2/columns.html i tìm 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>..
Anh ấy nói anh ấy có thể ' t sửa đổi HTML. – Frungi
Điều này sẽ chỉ cung cấp ô thứ hai trong mỗi bảng chứ không phải econd cell trong mỗi hàng. Bạn cần bảng .countTable bảng td: nth-child (2) – Deeksy
@Deeksy - Đ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 kiếm phần tử, và nó là' nnth' so với bất kỳ phần tử cha mẹ nào, bất kể nó có trong bộ chọn hay không. Bạn có thể thấy điều này làm việc ở đây: http://jsfiddle.net/JQQPz/ –
Nhưng ai sử dụng trình duyệt cũ hoặc IE? ;) – Duncan