Style de tableau CSS

Rembourrage du tableau

Pour contrôler l'espace entre la bordure et le contenu d'un tableau, utilisez la paddingpropriété sur les éléments <td> et <th> :

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

Ajoutez la border-bottompropriété à <th> et <td> pour les séparateurs horizontaux :

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

Utilisez le :hoversélecteur sur <tr> pour mettre en surbrillance les lignes du tableau au passage de la souris :

tr:hover {background-color: yellow;}

Pour les tableaux zébrés, utilisez le nth-child()sélecteur et ajoutez un background-colorà toutes les lignes paires (ou impaires) du tableau :

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

L'exemple ci-dessous spécifie la couleur d'arrière-plan et la couleur du texte des éléments <th> :

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