Tek tek hücreleri renklendirmeden CSS kullanarak tablo sütunlarını renklendirebilir miyim?

121

Sütun aralıklarını tamamen aşağı renklendirmenin bir yolu var mı? Aşağıdaki örneğe bakın:

<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>
Snippet'i genişlet

Ve renklendirmenin daha iyi bir yolunu (daha az kod, bireysel olmayan renklendirme) arıyorum, örneğin, "Motor" ve "Gövde" aralıkları, bunların altındaki tüm hücreler dahil #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>
Snippet'i genişlet

html  css 
— Dennis
kaynak
20
@zipzit: Aslında bir tabloya ihtiyacınız varsa, yani veriler doğası gereği tablo şeklindeyse (fiyatları olan bir ürün tablosu gibi) tablolarda yanlış bir şey yoktur . Tabloların eleştirisi, onları bir düzen aracı olarak kullanmaya karşıdır.
— 2014
5
Bunun Sıcak Ağ Sorularına nasıl girdiğini merak ediyorum
— Mr. Alien
dün sorulmuştu ve şu an itibariyle, Q için 24 ve A için 43 olumlu oy var ve kabul edilen Cevap deli gibi oylanmaya devam ediyor
— Dennis
2
İnsanlar bilmedikleri şeyleri öğrenmeyi severler, ister belgelenmiş bir jQuery sayı ayrıştırma özelliği, ister düzgün şeyler yapan bir HTML etiketi / kavramı, bilmedikleri :)
— Dennis
1
@canon heh evet, neyse iyi cevap ...
— Bay Alien

Yanıtlar:

167

Evet, şunları yapabilirsiniz ... <col>öğesini kullanarak :

.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>
Snippet'i genişlet

Not : spanSütun tanımının birden fazla sütuna uygulanmasını sağlamak için niteliği kullanabilirsiniz .
Ayrıca bakınız :<colgroup>

— kanon
kaynak
10
<col span="3" />Kapsayan sütunlara ihtiyacınız olacağını unutmayın .
— Niet the Dark Absol
colgroupTüm sütunları içeren a kullanmak oldukça anlamsız .
— Jukka K. Korpela
14
@ JukkaK.Korpela Bunu belirtmiş olsanız da belirtmeseniz de, bu şekilde çözümlenir <tbody>. Ben sadece belirtmeyi tercih ederim.
— Canon
colEtiket kullanımının o kadar yaygın olmadığını görüyorum, ancak bunu her zaman sütun genişlikleri için kullanıyorum
— Koen.
3
Bunun neden işe yaradığını veya sütunlarda hangi CSS özelliklerinin kullanılabileceğini merak eden biri varsa, CSS 2.1 spesifikasyonunun ilgili bölümleri 17.3 ve 17.5.1'dir .
— meriton
18

Bunun için nth-childseçiciyi kullanabilirsiniz :

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>
Snippet'i genişlet

— Markus Kottländer
kaynak
1
colKendilerini şekillendirmek bundan çok daha iyi (daha temiz ve daha hızlı).
— tomasz86
9

Hücrelerin stilini belirlemek genellikle en basit yoldur (istenirse sütuna göre), ancak sütunlara farklı şekillerde stil verilebilir. Basit bir yol, sütunları bir colgroupöğeye sarmak ve üzerinde stiller ayarlamaktır. Misal:

<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>
Snippet'i genişlet

— Jukka K. Korpela
kaynak
1
Bireysel Eğer coliçeride elemanları colgroups ayrı ayrı tasarlanmış olması gerekmez, ayrıca ayarlayabilirsiniz spanüzerinde niteliği colgroupkendisi - <colgroup span="2">- yerine yerleştirme coliçindeki unsurları.
— misterManSam
5

CSS3'ü kullanabilirsiniz: 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>
Snippet'i genişlet

— leo60228
kaynak
5

Bunun için nth-childcss sözde sınıfını kullanırdı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;
}

Kod parçacığını göster

— Howard Renollet
kaynak
5

Aşağıdaki makine n'inci çocuk seçicidir ve çalışmalıdır ...

<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>
— yemek-uyku-kod
kaynak
Muhtemelen >tr ve td arasında bir tane istiyorsunuz , çünkü sadece tabloların içindeki trs içinde tds seçme zahmetine girmişsinizdir ... (masa gruplarına dikkat edin.)
— ANeves
Cevabınız için teşekkürler, bu farklı bir çözüm
— Muhammed Kermani
Bu bir abartıdır. Fazla belirtme performans için kötüdür. s her zaman içeride table tr tdolduğu için gereksizdir ve . tdtrtable
— tomasz86
4

Nth-child ifadeleri kullanan versiyonum:

Önce hücreleri renklendirmek ve ardından şeffaf olmasını istediklerimin rengini kaldırmak için CSS basamaklama kuralları kavramını kullanma. İlk seçici, ilkinden sonraki tüm hücreleri seçer ve ikincisi, şeffaf olması için beşinci hücreyi seçer.

<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>
Snippet'i genişlet

Bu ilginç referansı kontrol edin: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

— Marcs
kaynak
1

Bu, birçok harika cevabı olan eski bir sorudur. Henüz bahsedilmeyen -nve nth-last-childseçicileri eklemek istedim . Birden çok sütuna CSS uygularken faydalıdır, ancak stilden önce sütun sayısını bilemeyebilir veya farklı genişliklere sahip birden çok tabloya sahip olabilirler.

/* 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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.