Modifier le css par défaut de DataTable

**moimp** · 31/10/2023, 15h40

Bonjour,
Je voudrais conserver le CSS par défaut de DataTable et ne corriger qu'un minimum de propriétés.
J'ai donc pris la précaution de mettre le CSS par défaut avant ma feuille personnalisée mais ceci ne suffit pas à prendre en considération mais modifications.
Mes feuilles de styles déclarées dans la balise <head> sont les suivantes:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<head>
	<!-- balises autres que link -->
	<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css">
	<link rel="stylesheet" media="all" type="text/css" href="css/main.css">
	<link rel="stylesheet" media="print" type="text/css" href="css/print.css">
	<!-- balises autres que link -->
</head>

Dans main.css, j'ai

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#table tbody tr
{
	height:5px !important; /* Pour test uniquement */
	border:1px solid white; /* Pour test uniquement */
}
#table tbody tr .even
{
	background-color:grey;
}

Dans la console du navigateur, j'ai:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<tbody>
	<tr class="odd"><td class="sorting_1">Nom 1</td><td>Prénom 1</td><td>France</td><td>Code postal 1</td><td>Ville 1</td><td>Tél. 1</td></tr>
	<tr class="even"><td class="sorting_1">Nom 2</td><td>Prénom 2</td><td>France</td><td>Code postal 2</td><td>Ville 2</td><td>Tél. 2</td></tr>
</tbody>

Là où je pense avoir un problème est que dans la console la feuille de style "main.css" apparaît avant celle de DataTable.

**Pytet** · 02/11/2023, 16h12

Bonjour,

Sauf erreur, la console affiche les fichiers css dans l'ordre inverse de leur chargement.
Tes fichiers css semblent donc bien inclus dans le bon ordre : jquery.dataTables.css en premier puis ta surcharge main.css en second.

Tu sembles avoir fait une erreur sur le 2ème selecteur, il faudrait enlever l'espace entre "tr" et "even" :
#table tbody tr .even -> cible les balises enfant de "tr" qui possède une classe "even"
#table tbody tr.even -> cible les balises "tr" qui possède une classe "even"

Es-tu sûr d'avoir charger la page sans utiliser le cache du navigateur (Ctrl + F5) ?
Est-ce que tu vois les surcharges css de main.css dans la console ?

Enfin, pour que tes surcharges soient prises en compte, il est également nécessaire que le poids des déclarations de ton css soit supérieur à celui de dataTables.
Ton utilisation d'un identifiant (#table) et de !important devrait déjà régler ce point. Pour en savoir plus : https://www.emmanuelbeziat.com/blog/...-declarations/

**moimp** · 02/11/2023, 18h31

Envoyé par Pytet

Sauf erreur, la console affiche les fichiers css dans l'ordre inverse de leur chargement.
Tes fichiers css semblent donc bien inclus dans le bon ordre : jquery.dataTables.css en premier puis ta surcharge main.css en second.

C'est exact et c'est un soulagement.

Envoyé par Pytet

Tu sembles avoir fait une erreur sur le 2ème selecteur, il faudrait enlever l'espace entre "tr" et "even" :
#table tbody tr .even -> cible les balises enfant de "tr" qui possède une classe "even"
#table tbody tr.even -> cible les balises "tr" qui possède une classe "even"

Là était bien la source de mon problème.

Envoyé par Pytet

Es-tu sûr d'avoir charger la page sans utiliser le cache du navigateur (Ctrl + F5) ?
Est-ce que tu vois les surcharges css de main.css dans la console ?

Oui, c'est quelque chose que je vérifie toujours. Tu as raison, c'est important.

Envoyé par Pytet

Enfin, pour que tes surcharges soient prises en compte, il est également nécessaire que le poids des déclarations de ton css soit supérieur à celui de dataTables.
Ton utilisation d'un identifiant (#table) et de !important devrait déjà régler ce point. Pour en savoir plus : https://www.emmanuelbeziat.com/blog/...-declarations/

Je n'ai pas eu besoin de recourir à ces artifices.

Modifier le css par défaut de DataTable

CSS

Vue hybride

Discussions similaires

Partager

Partager