CSS – Aplicar estilo diferente (color, color de fondo) en pares e impares Tabla Columnas (TD)

En este Ejemplo CSS Estilo vamos a aprender cómo aplicar diferentes estilos CSS en pares y Tabla ODD columnas y cómo resaltar la tabla de datos (celdas) al pasar el ratón (flotar) Evento.

CSS Fragmento de código – estilo diferente for pares y columnas filas impares tabla (Tabla CSS)

CSS

<style>
.tableStyle1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: auto;
}
.tableStyle1 th {
text-align: left;
background-color: #006699;
color: #fff;
text-align: left;
padding: 25px;
}
.tableStyle1 td, .tableStyle1 th {
border: 1px solid #dedede;
padding: 15px;
}
.tableStyle1 td:nth-child(even){
background-color: #afafaf;
}
.tableStyle1 td:nth-child(odd){
background-color: #cfcfcf;
}
.tableStyle1 td:hover{
background-color: #e5423f;
}
</style>

Código fuente HTML con CSS

<!--CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (TD).-->
<html>
<head>
<title>CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (TD).</title>
<!--Example CSS-->
<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
<style>
.tableStyle1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: auto;
}
.tableStyle1 th {
text-align: left;
background-color: #006699;
color: #fff;
text-align: left;
padding: 25px;
}
.tableStyle1 td, .tableStyle1 th {
border: 1px solid #dedede;
padding: 15px;
}
.tableStyle1 td:nth-child(even){
background-color: #afafaf;
}
.tableStyle1 td:nth-child(odd){
background-color: #cfcfcf;
}
.tableStyle1 td:hover{
background-color: #e5423f;
}
</style>
</head>
<body>
<h1>CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (TD).</h1>
<table class="tableStyle1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Country</th>
</tr>
<tr>
<td>Mike</td>
<td>23</td>
<td>Male</td>
<td>USA</td>
</tr>
<tr>
<td>Mohit</td>
<td>28</td>
<td>Male</td>
<td>India</td>
</tr>
<tr>
<td>James</td>
<td>31</td>
<td>Male</td>
<td>Canada</td>
</tr>
<tr>
<td>Rossy</td>
<td>32</td>
<td>Female</td>
<td>South Africa</td>
</tr>
</table>
</body>
</html>

Resultado

CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (td) - 4
clic for DEMO y rarr;


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *