Tôi có thể tô màu các cột trong bảng bằng CSS mà không tô màu các ô riêng lẻ không?

121

Có cách nào để tô màu các nhịp của cột theo chiều dọc không. Xem ví dụ bắt đầu bên dưới:

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Mở rộng đoạn mã

Và tôi đang tìm cách tốt hơn (ít mã hơn, không tô màu riêng lẻ) để tô màu, ví dụ: khoảng "Động cơ" và "Phần thân", bao gồm tất cả các ô bên dưới chúng trong #DDD

<style>
  .color {
    background-color: #DDD
  }
</style>
<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>

Mở rộng đoạn mã

html css

— Dennis
nguồn

20

@zipzit: Không có gì sai với các bảng nếu bạn thực sự cần một bảng - tức là nếu dữ liệu có bản chất là bảng (như bảng các sản phẩm có giá cả). Những lời chỉ trích về bảng là chống lại việc sử dụng chúng như một công cụ bố trí.

— sleske

5

Tự hỏi làm thế nào điều này được đưa vào Câu hỏi mạng nóng

— Mr. Alien

nó đã được hỏi ngày hôm qua và như ngay bây giờ, có 24 upvotes trên Q và 43 trên A, và trả lời chấp nhận được và vẫn đang được bỏ phiếu tán như điên

— Dennis

2

mọi người thích tìm hiểu những điều họ không biết, có thể là đặc thù được ghi lại bằng tài liệu về phân tích cú pháp số jQuery, hoặc thẻ / khái niệm HTML thực hiện những điều gọn gàng mà họ không biết :)

— Dennis

1

@canon heh vâng, dù sao câu trả lời đàng hoàng ...

— Mr. Alien

167

Có, bạn có thể ... sử dụng <col>phần tử:

.grey {
  background-color: rgba(128,128,128,.25);
}
.red {
  background-color: rgba(255,0,0,.25);
}
.blue {
  background-color: rgba(0,0,255,.25);
}

<table>
  <colgroup>
    <col class="grey" />
    <col class="red" span="3" />
    <col class="blue" />
  </colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th colspan="3">color 1</th>
      <th>color 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>
      <td>blue</td>
    </tr>
    <tr>
      <th>2</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>      
      <td>blue</td>
    </tr>
  </tbody>
</table>

Mở rộng đoạn mã

_{Lưu ý : Bạn có thể sử dụng spanthuộc tính để làm cho định nghĩa col áp dụng cho nhiều cột.

Xem thêm :<colgroup>}

— canon
nguồn

10

Lưu ý rằng bạn sẽ cần <col span="3" />các cột mở rộng.

— Niet the Dark Absol

Thật vô nghĩa nếu sử dụng một colgroupchứa tất cả các cột.

— Jukka K. Korpela

14

@ JukkaK.Korpela Nó được phân tích cú pháp theo cách đó bất kể bạn có chỉ định nó hay không - chỉ cần thích <tbody>. Tôi chỉ đơn giản là muốn chỉ định.

— canon

Tôi thấy rằng việc sử dụng colthẻ không phổ biến, nhưng tôi luôn sử dụng nó cho độ rộng cột

— Koen.

3

Trong trường hợp bất kỳ ai khác tò mò tại sao điều này hoạt động hoặc các thuộc tính CSS nào có thể được sử dụng trên các cột, thì các phần thích hợp của thông số CSS 2.1 là 17.3 và 17.5.1 .

— đức

18

Bạn có thể sử dụng nth-childbộ chọn cho điều đó:

tr td:nth-child(2),
tr td:nth-child(3) {
  background: #ccc;
}

<table>
  <tr>
    <th colspan="2">headline 1</th>
    <th>headline 2</th>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
</table>

Mở rộng đoạn mã

— Markus Kottländer
nguồn

1

Cách tạo kiểu coltốt hơn thế này (sạch hơn và nhanh hơn).

— tomasz86

9

Nói chung là đơn giản nhất để tạo kiểu cho các ô (theo cột nếu muốn), nhưng các cột có thể được tạo kiểu theo những cách khác nhau. Một cách đơn giản là quấn các cột trong một colgroupphần tử và đặt các kiểu trên đó. Thí dụ:

<style>
.x {
    background-color: #DDD
}
</style>
<table border="1">
<col>
<colgroup class=x>
  <col>
  <col>
  <col>
</colgroup>
<col>
<colgroup class=x>
  <col>
  <col>
</colgroup>
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>

Mở rộng đoạn mã

— Jukka K. Korpela
nguồn

1

Nếu các colphần tử riêng lẻ bên trong các colgroups không cần được tạo kiểu riêng lẻ, bạn cũng có thể đặt spanthuộc tính trên colgroupchính nó - <colgroup span="2">- thay vì đặt colcác phần tử bên trong nó.

— misterManSam

5

Bạn có thể sử dụng CSS3: http://jsfiddle.net/snuggles08/bm98g8v8/

<style>
  .table td:nth-of-type(1) {
    background: red;
  }
  .table td:nth-of-type(5) {
    background: blue;
  }
  .table td:nth-of-type(3) {
    background: green;
  }
  .table td:nth-of-type(7) {
    background: lime;
  }
  .table td:nth-of-type(2) {
    background: skyblue;
  }
  .table td:nth-of-type(4) {
    background: darkred;
  }
  .table td:nth-of-type(6) {
    background: navy;
  }
</style>
Styled table:
<table border="1" class="table">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
<hr>Unstyled table:
<table border="1" class="table2">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

Mở rộng đoạn mã

— leo60228
nguồn

5

Tôi sẽ sử dụng lớp nth-childgiả css cho việc này:

tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){
    background-color: #DDD;
}

Hiển thị đoạn mã

tr td:nth-child(2),
tr th:nth-child(2),
tr td:nth-child(3),
tr td:nth-child(4),
tr th:nth-child(4),
tr td:nth-child(6),
tr td:nth-child(7) {
  background-color: #DDD;
}

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Mở rộng đoạn mã

— Howard Renollet
nguồn

5

Nông cụ sau là bộ chọn con thứ n và sẽ hoạt động ...

<style type="text/css">
    th:nth-child(2),
    th:nth-child(4)
    {
        background-color: rgba(255, 0, 0, 1.0);
    }

    td:nth-child(2), 
    td:nth-child(3),
    td:nth-child(4),
    td:nth-child(6),
    td:nth-child(7)
    {
        background-color: rgba(255, 0, 0, 0.5);
    }
</style>

— ăn-ngủ-mã
nguồn

Bạn có thể muốn một >giữa tr và td, kể từ khi bạn đi đến những rắc rối của việc lựa chọn tds chỉ bên TRS chỉ bên trong bảng ... (tâm tablegroups.)

— ANeves

Cảm ơn cho câu trả lời, đây là giải pháp khác nhau

— Mohammad Kermani

Đây là một sự quá mức cần thiết. Chỉ định quá mức có hại cho hiệu suất. table tr tdlà dư thừa vì tds luôn ở bên trong trvà table.

— tomasz86

4

Phiên bản của tôi sử dụng biểu thức nth-child:

Sử dụng khái niệm CSS về các quy tắc xếp tầng để tô màu các ô trước tiên và sau đó bỏ tô màu những ô mà tôi muốn trong suốt. Bộ chọn đầu tiên chọn tất cả các ô sau ô đầu tiên và bộ chọn thứ hai chọn ô thứ năm là trong suốt.

<style type="text/css">
  /* colored */
  td:nth-child(n+2) { background-color: #ddd }
  /* uncolored */
  td:nth-child(5) { background-color: transparent }
</style>

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Mở rộng đoạn mã

Kiểm tra tài liệu tham khảo thú vị này: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

— Marcs
nguồn

1

Đây là một câu hỏi cũ với rất nhiều câu trả lời tuyệt vời. Chỉ muốn thêm các bộ chọn -nvà nth-last-childchưa được đề cập. Chúng hữu ích khi áp dụng CSS cho nhiều cột nhưng có thể không biết số lượng cột trước khi tạo kiểu hoặc có nhiều bảng với độ rộng khác nhau.

/* Select the first two */
table tr td:nth-child(-n + 2) {
  background-color: lightblue;
}

/* Select all but the first two */
table tr td:not(:nth-child(-n + 2)) {
    background-color:lightgreen;
}

/* Select last two only */
table tr td:nth-last-child(-n + 2) {
  background-color:mistyrose;
}

/* Select all but the last two */
table tr td:not(:nth-last-child(-n + 2)) {
    background-color:yellow;
}

jsFiddle: https://jsfiddle.net/3rpf5oht/2/

— elPastor
nguồn