¿Puedo colorear las columnas de la tabla usando CSS sin colorear celdas individuales?

121

¿Hay alguna forma de colorear los tramos de las columnas hasta el final? Vea, ejemplo de inicio a continuació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>
Expandir fragmento

Y estoy buscando una mejor manera (menos código, coloración no individual) de colorear, por ejemplo, los tramos de "Motor" y "Cuerpo", incluidas todas las celdas debajo de ellos en #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>
Expandir fragmento

html  css 
— Dennis
fuente
20
@zipzit: No hay nada de malo con las tablas si realmente necesita una tabla, es decir, si los datos son de naturaleza tabular (como una tabla de productos con precios). La crítica a las tablas está en contra de su uso como herramienta de diseño.
— sleske
5
Me pregunto cómo entró en Hot Network Questions
— Mr. Alien
se preguntó ayer y, a partir de ahora, tiene 24 votos a favor en Q y 43 en A, y la respuesta aceptada fue y todavía está siendo votada como loca
— Dennis
2
a la gente le gusta aprender cosas que no sabían, ya sea una peculiaridad documentada del análisis de números jQuery, o una etiqueta / concepto HTML que hace cosas interesantes, que no sabían :)
— Dennis
1
@canon heh sí, de todos modos una respuesta decente ...
— Sr. Alien

Respuestas:

167

Sí, puedes ... usando el <col>elemento:

.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>
Expandir fragmento

Nota : Puede utilizar el spanatributo para que la definición de columna se aplique a más de una columna.
Ver también :<colgroup>

— canon
fuente
10
Tenga en cuenta que necesitará <col span="3" />para las columnas de expansión.
— Niet the Dark Absol
Es bastante inútil usar un colgroupque contenga todas las columnas.
— Jukka K. Korpela
14
@ JukkaK.Korpela Se analiza de esa manera independientemente de si lo especificas o no, exactamente igual <tbody>. Simplemente prefiero especificar.
— canon
Veo que el uso de la coletiqueta no es tan común, pero la uso siempre para anchos de columna
— Koen.
3
En caso de que alguien más tenga curiosidad por saber por qué funciona, o qué propiedades CSS se pueden usar en las columnas, las secciones pertinentes de la especificación CSS 2.1 son 17.3 y 17.5.1 .
— Meriton el
18

Puedes usar el nth-childselector para eso:

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>
Expandir fragmento

— Markus Kottländer
fuente
1
Peinarse a colsí mismos es mucho mejor que esto (más limpio y más rápido).
— tomasz86
9

Por lo general, es más sencillo aplicar estilo a las celdas (por columna si se desea), pero las columnas se pueden diseñar de diferentes maneras. Una forma sencilla es envolver columnas en un colgroupelemento y establecer estilos en él. Ejemplo:

<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>
Expandir fragmento

— Jukka K. Korpela
fuente
1
Si los colelementos individuales dentro de la colgroups no necesitan ser estilizados individualmente, también puede establecer el spanatributo en colgroupsí mismo <colgroup span="2">- en lugar de colocar colelementos dentro de él.
— misterManSam
5

Puede utilizar 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>
Expandir fragmento

— leo60228
fuente
5

nth-childUsaría la pseudoclase css para esto:

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

Mostrar fragmento de código

— Howard Renollet
fuente
5

El siguiente implemento es el selector de n-ésimo hijo y debería funcionar ...

<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>
— comer-dormir-codigo
fuente
Es posible que desee una >entre tr y td, desde que se tomó la molestia de seleccionar TDS sólo dentro de trs sólo dentro de las tablas ... (mente los tablegroups.)
— ANeves
Gracias por la respuesta, esta es una solución diferente
— Mohammad Kermani
Esto es una exageración. Sobreespecificar es malo para el rendimiento. table tr tdes redundante ya que los tds están siempre dentro try table.
— tomasz86
4

Mi versión usando expresiones nth-child:

Usando el concepto CSS de reglas en cascada para colorear primero las celdas y luego decolorar las que quiero que sean transparentes. El primer selector selecciona todas las celdas después de la primera y el segundo selecciona la quinta celda para que sea transparente.

<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>
Expandir fragmento

Consulta esta interesante referencia: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

— Marcos
fuente
1

Esta es una vieja pregunta con muchas respuestas excelentes. Solo quería agregar los selectores -ny nth-last-childque aún no se han mencionado. Son útiles al aplicar CSS a varias columnas, pero es posible que no sepan la cantidad de columnas antes de aplicar el estilo o que tengan varias tablas con diferentes anchos.

/* 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
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.