Estilo de tabla CSS

Acolchado de mesa

Para controlar el espacio entre el borde y el contenido de una tabla, use la paddingpropiedad en los elementos <td> y <th>:

th, td {
padding: 15px;
text-align: left;
}

Agregue la border-bottompropiedad a <th> y <td> para divisores horizontales:

th, td {
border-bottom: 1px solid #ddd;
}

Use el :hoverselector en <tr> para resaltar las filas de la tabla al pasar el mouse por encima:

tr:hover {background-color: yellow;}

Para las tablas con rayas de cebra, use el nth-child()selector y agregue un background-colora todas las filas pares (o impares) de la tabla:

tr:nth-child(even) {background-color: #f2f2f2;}

El siguiente ejemplo especifica el color de fondo y el color del texto de los elementos <th>:

th {
background-color: #04AA6D;
color: white;
}