Kann ich Tabellenspalten mit CSS einfärben, ohne einzelne Zellen einzufärben?

121

Gibt es eine Möglichkeit, Spaltenbereiche ganz nach unten zu färben? Siehe Beispiel unten:

<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>
Erweitern Sie das Snippet

Und ich suche nach einer besseren Möglichkeit (weniger Code, nicht individuelle Farbgebung), um beispielsweise die Bereiche "Engine" und "Body" einzufärben, einschließlich aller Zellen darunter #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>
Erweitern Sie das Snippet

html css Dennis
quelle
20
@zipzit: Es ist nichts Falsches an Tabellen, wenn Sie tatsächlich eine Tabelle benötigen - dh wenn die Daten tabellarischer Natur sind (wie eine Tabelle mit Produkten mit Preisen). Die Kritik an Tabellen ist dagegen, sie als Layout-Tool zu verwenden.
Sleske
5
Ich frage mich, wie dies zu Hot Network Questions
Mr. Alien
es wurde gestern gefragt und hat ab sofort 24 positive Stimmen für Q und 43 für A, und die akzeptierte Antwort wurde und wird immer noch wie verrückt bewertet
Dennis
2
Leute lernen gerne Dinge, die sie nicht wussten, sei es eine dokumentierte Besonderheit beim Parsen von jQuery-Zahlen oder ein HTML-Tag / Konzept, das nette Dinge tut, von denen sie nichts wussten :)
Dennis
1
@canon heh ja, sowieso anständige Antwort ...
Mr. Alien

Antworten:

167

Ja, Sie können ... mit dem <col>Element:

.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>
Erweitern Sie das Snippet

Hinweis : Mit dem spanAttribut können Sie die Spaltendefinition auf mehr als eine Spalte anwenden.
Siehe auch :<colgroup>

Kanon
quelle
10
Beachten Sie, dass Sie <col span="3" />für die überspannenden Spalten benötigen .
Niet the Dark Absol
Es ist ziemlich sinnlos, eine zu verwenden colgroup, die alle Spalten enthält.
Jukka K. Korpela
14
@ JukkaK.Korpela Es wird auf diese Weise analysiert, unabhängig davon, ob Sie es angeben oder nicht - genau wie <tbody>. Ich ziehe es einfach vor zu spezifizieren.
Kanon
Ich sehe, dass die Verwendung des colTags nicht so häufig ist, aber ich verwende es immer für Spaltenbreiten
Koen.
3
Falls jemand anderes neugierig ist, warum dies funktioniert oder welche CSS-Eigenschaften für Spalten verwendet werden können, sind die relevanten Abschnitte der CSS 2.1-Spezifikation 17.3 und 17.5.1 .
Meriton
18

Sie können den nth-childSelektor dafür verwenden:

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>
Erweitern Sie das Snippet

Markus Kottländer
quelle
1
Das Styling colselbst ist viel besser (sauberer und schneller).
Thomasz86
9

Es ist im Allgemeinen am einfachsten, Zellen zu formatieren (falls gewünscht nach Spalten), aber Spalten können auf verschiedene Arten gestaltet werden. Eine einfache Möglichkeit besteht darin, Spalten in ein colgroupElement einzuschließen und Stile darauf festzulegen. Beispiel:

<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>
Erweitern Sie das Snippet

Jukka K. Korpela
quelle
1
Wenn die einzelnen colElemente innerhalb der colgroups müssen nicht individuell gestaltet werden, können Sie auch das Set - spanAttribut für das colgroupselbst - <colgroup span="2">- anstelle der Platzierung colElemente in seinem Inneren.
MisterManSam
5

Sie können CSS3 verwenden: 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>
Erweitern Sie das Snippet

leo60228
quelle
5

Ich würde die nth-childCSS-Pseudoklasse dafür verwenden:

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

Code-Snippet anzeigen

Howard Renollet
quelle
5

Das folgende Gerät ist der n-te Kind-Selektor und sollte funktionieren ...

<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>
Eat-Sleep-Code
quelle
Sie wollen wahrscheinlich ein >zwischen tr und td, da Sie sich die Mühe gemacht haben, tds nur innerhalb von trs nur innerhalb von Tabellen auszuwählen ... (beachten Sie die Tabellengruppen.)
ANeves
Vielen Dank für die Antwort, dies ist eine andere Lösung
Mohammad Kermani
Das ist ein Overkill. Überspezifikation ist schlecht für die Leistung. table tr tdist redundant, da tds immer in trund sind table.
Thomasz86
4

Meine Version mit n-ten untergeordneten Ausdrücken:

Verwenden des CSS-Konzepts von Kaskadenregeln, um zuerst die Zellen zu färben und dann diejenigen zu entfärben, die transparent sein sollen. Der erste Selektor wählt alle Zellen nach der ersten aus, und der zweite wählt die fünfte Zelle aus, die transparent sein soll.

<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>
Erweitern Sie das Snippet

Überprüfen Sie diese interessante Referenz: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

Marcs
quelle
1

Dies ist eine alte Frage mit vielen tollen Antworten. Ich wollte nur die -nund nth-last-childSelektoren hinzufügen , die noch nicht erwähnt wurden. Sie sind hilfreich, wenn Sie CSS auf mehrere Spalten anwenden, kennen jedoch möglicherweise nicht die Anzahl der Spalten vor dem Stylen oder haben mehrere Tabellen mit unterschiedlichen Breiten.

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