Bisakah saya mewarnai kolom tabel menggunakan CSS tanpa mewarnai sel individu?

121

Apakah ada cara untuk mewarnai bentang kolom sampai ke bawah. Lihat, contoh awal di bawah ini:

<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>
Luaskan cuplikan

Dan saya mencari cara yang lebih baik (lebih sedikit kode, pewarnaan non-individu) untuk mewarnai, misalnya, rentang "Mesin" dan "Badan", termasuk semua sel di bawahnya di #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>
Luaskan cuplikan

html css Dennis
sumber
20
@zipzit: Tidak ada yang salah dengan tabel jika Anda benar - benar membutuhkan tabel - yaitu jika datanya bersifat tabel (seperti tabel produk dengan harga). Kritik terhadap tabel adalah menentang penggunaannya sebagai alat tata letak.
sleske
5
Bertanya-tanya bagaimana ini memasuki Pertanyaan Jaringan Panas
Tn. Alien
itu ditanyakan kemarin dan sampai sekarang, memiliki 24 suara positif untuk Q dan 43 di A, dan Jawaban yang diterima adalah dan masih diberi suara positif seperti orang gila
Dennis
2
orang-orang suka mempelajari hal-hal yang tidak mereka ketahui, baik itu penguraian angka jQuery yang terdokumentasi, atau tag / konsep HTML yang melakukan hal-hal rapi, mereka tidak tahu tentang :)
Dennis
1
@canon heh ya, lagian jawaban yang layak ...
Tuan Alien

Jawaban:

167

Ya, Anda bisa ... menggunakan <col>elemen:

.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>
Luaskan cuplikan

Catatan : Anda dapat menggunakan spanatribut agar definisi kolom diterapkan ke lebih dari satu kolom.
Lihat juga :<colgroup>

kanon
sumber
10
Perhatikan bahwa Anda akan membutuhkan <col span="3" />kolom rentang.
Niet the Dark Absol
Agak tidak ada gunanya menggunakan a colgroupyang berisi semua kolom.
Jukka K. Korpela
14
@ JukkaK.Korpela Itu akan diurai seperti itu terlepas dari apakah Anda menentukannya atau tidak -seperti <tbody>. Saya hanya lebih suka menentukan.
kanon
Saya melihat bahwa penggunaan coltag tidak begitu umum, tetapi saya selalu menggunakannya untuk lebar kolom
Koen.
3
Jika ada orang yang ingin tahu mengapa ini berfungsi, atau properti CSS mana yang dapat digunakan pada kolom, bagian terkait dari spesifikasi CSS 2.1 adalah 17.3 dan 17.5.1 .
Meriton
18

Anda dapat menggunakan nth-childselektor untuk itu:

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>
Luaskan cuplikan

Markus Kottländer
sumber
1
Styling colsendiri jauh lebih baik dari ini (lebih bersih dan lebih cepat).
tomasz86
9

Biasanya paling sederhana untuk memberi gaya pada sel (menurut kolom jika diinginkan), tetapi kolom dapat diberi gaya, dengan cara yang berbeda. Salah satu cara sederhana adalah membungkus kolom dalam sebuah colgroupelemen dan mengatur gaya di atasnya. Contoh:

<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>
Luaskan cuplikan

Jukka K. Korpela
sumber
1
Jika colelemen individu di dalam colgroups tidak perlu diberi gaya satu per satu, Anda juga dapat menyetel spanatribut colgroupitu sendiri - <colgroup span="2">- daripada menempatkan colelemen di dalamnya.
misterManSam
5

Anda dapat menggunakan 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>
Luaskan cuplikan

leo60228
sumber
5

Saya akan menggunakan nth-childpseudo-class css untuk ini:

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;
}

Tampilkan cuplikan kode

Howard Renollet
sumber
5

Implement berikut adalah pemilih anak ke-n dan harus berfungsi ...

<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>
makan-tidur-kode
sumber
Anda mungkin menginginkan >antara tr dan td, karena Anda mengalami kesulitan memilih tds hanya di dalam trs saja di dalam tabel ... (perhatikan tablegroups.)
ANeves
Terima kasih atas jawabannya, ini adalah solusi yang berbeda
Mohammad Kermani
Ini berlebihan. Menentukan secara berlebihan berdampak buruk bagi kinerja. table tr tdadalah mubazir karena tdselalu di dalam trdan table.
tomasz86
4

Versi saya menggunakan ekspresi anak ke-n:

Menggunakan konsep CSS aturan kaskade untuk pertama mewarnai sel dan kemudian menghapus warna yang saya ingin transparan. Pemilih pertama memilih semua sel setelah sel pertama, dan sel kedua memilih sel kelima agar transparan.

<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>
Luaskan cuplikan

Periksa referensi menarik ini: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

Marcs
sumber
1

Ini adalah pertanyaan lama dengan banyak jawaban bagus. Hanya ingin menambahkan pemilih -ndan nth-last-childyang belum disebutkan. Mereka membantu saat menerapkan CSS ke beberapa kolom tetapi mungkin tidak mengetahui jumlah kolom sebelum penggayaan, atau memiliki beberapa tabel dengan lebar yang bervariasi.

/* 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
sumber