IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Modifier le css par défaut de DataTable


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut Modifier le css par défaut de DataTable
    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.

  2. #2
    Membre émérite
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    429
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 429
    Par défaut
    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/

  3. #3
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Citation Envoyé par Pytet Voir le message
    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.

    Citation Envoyé par Pytet Voir le message
    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.

    Citation Envoyé par Pytet Voir le message
    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.

    Citation Envoyé par Pytet Voir le message
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 4
    Dernier message: 13/04/2011, 11h40
  2. [Joomla!] Impossible de modifier le template par défaut
    Par MarcS dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 8
    Dernier message: 28/03/2007, 16h57
  3. Comment modifier l'utilisateur par défaut au démarrage de XP SP2 ?
    Par zemeilleurofgreg dans le forum Windows XP
    Réponses: 8
    Dernier message: 13/09/2006, 23h56
  4. Réponses: 4
    Dernier message: 04/10/2005, 00h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo