Como criar uma tabela com células de diferentes cores de fundo usando CSS

ramones33 · 04/10/2017

Hola, tengo una tabla que tiene dos columnas, las celdas de arriba (Encabezados de las columnas) tienen colores distintos para cada columna, como esta se repite en todas las entradas, me gustaría controlar por CSS los colores ya que si luego quiero cambiar los colores no tendré que ir a cada entrada a hacerlo.

Pensé en crear un estilo td1 pero no me ha funcionado, Encontré varios tutoriales pero son para crear tablas con diferentes formatos, en mi caso, deseo la misma tabla pero diferentes formatos para las celdas de encabezado. ¿Me podrían dar una mano?

Este es elcódigo original

Inserir CODE, HTML ou PHP:

/* Tables
--------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: 2.5;
	margin-bottom: 20px;
	width: 100%;
}

tbody {
	border-bottom: 1px solid #ddd;
}

thead,
th,
td {
	text-align: center;
}

thead {
	color: #fff;
	font-weight: bold;
	background-color: #090961;
}

th {
	font-weight: bold;
	text-transform: uppercase;
}

td {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #fff;
}

Este fue el código que yo infructuosamente creé:

Inserir CODE, HTML ou PHP:

/* Tables
--------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: 2.5;
	margin-bottom: 20px;
	width: 100%;
}

tbody {
	border-bottom: 1px solid #ddd;
}

thead,
th,
td,
.td1,
.td2,
.td3,
 {
	text-align: center;
}

thead {
	color: #fff;
	font-weight: bold;
	background-color: #090961;
}

th {
	font-weight: bold;
	text-transform: uppercase;
}

td
 {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #fff;
}

.td1
 {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #d6d6d6;
}

.td2
 {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #069ecc;
}

.td3
 {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #08499e;
}

lombervid · 05/10/2017

Pues lo único que veo que le faltaría a tus clases es ponerle un color:, pero debería de funcionar.

Por qué no te funciona (qué sale o que pasa)?
Dónde estás poniendo las clases?

Demo

Saludos.

josmanmx · 19/10/2017

Si quieres que las columnas pares tengan un color y otro color las impares puedes usar la propiedad odd y even en las clases css aquí tienes algo de documentación: CSS: even and odd rules

si lo que deseas es un color distinto en cada columna, usa clases como vas amigo, pero para poderte ayudar también sería bueno que coloques algo de html para tener más contexto o indicar cual es la web que haces.

marjuanm · 19/10/2017

Si quieres que las columnas pares tengan un color y otro color las impares puedes usar la propiedad odd y even en las clases css aquí tienes algo de documentación: CSS: even and odd rules

No conocía esa funcionalidad, gracias por el tip :encouragement:

sarcansino · 22/10/2017

Tampoco las conocía, gracias amigo.

Como criar uma tabela com células de diferentes cores de fundo usando CSS

ramones33

lombervid

josmanmx

marjuanm

sarcansino

Tópicos similares