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

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    avril 2011
    Messages
    247
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2011
    Messages : 247
    Points : 98
    Points
    98

    Par défaut Poids sélecteur non pris en compte sur une TABLE

    Bonjour,

    Je fais un tableau et je veut mettre un background-color sur ma première colonne mais c'est l'ancienne couleur qui reste alors que le poids du sélecteur de l'ancienne couleur est plus faible que la nouvelle et je ne comprends pas pourquoi sa fait cela ?


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    td{
      background-color: blueviolet;  /*Ici le poid est de 0, 0, 1*/
    }
     
    .col1{ 
      background-color: aqua; /*Et là le poid est de 0, 1, 0*/
    }
    Ce qui donne :
    Nom : tab poid css.png
Affichages : 39
Taille : 13,5 Ko

    Normalement toute la 1er colonne aurait dû être en aqua.

    Pour remédier à ce problème il faut que je rajoute le sélecteur tfoot :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    tfoot td{
      background-color: blueviolet;  /*Ici le poid est de 0, 0, 2*/
    }
     
    .col1{ 
      background-color: aqua; /*Et là le poid est de 0, 1, 0*/
    }
    Ce qui donne :

    Nom : tab poid css2.jpg
Affichages : 39
Taille : 51,3 Ko

    Donc le résultat attendu ! Pourquoi le poid du sélecteur de la classe qui est plus important ne prend pas le dessus sur celui de la balise ?

    Merci par avance.

    Le
    Code Html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="styles.css" type="text/css">
        <title>First tableau</title>
      </head>
     
      <body>
        <header>
          <a id=linkCaseImg href="linkCaseImg" target="_blank">
            <img id=linkImgSrc src="linkImgSrc" alt="Mon image" />
          </a>
        </header>
     
        <nav></nav>
     
        <section>
          <article>
            <table >
              <caption >My Array</caption>
              <colgroup >
                <col class="col1"/>
                <col class="col2"/>
                <col class="col3"/>
                <col class="col4"/>
                <col class="col5"/>
                <col class="col6"/>
              </colgroup>  
              <thead>
                <tr>
                  <th>Nom</th>
                  <th>Prénom</th>
                  <th>Age</th>
                  <th>Adresse</th>
                  <th>Profession</th>
                  <th>Diplôme</th>
                </tr>
              </thead>
              <tfoot><td colspan="6">SPOIL</td></tfoot>
              <tbody>
                <tr>
                  <td>Terminator</td>
                  <td>---</td>
                  <td>---</td>
                  <td>Terre</td>
                  <td>Tueur pro</td>
                  <td>---</td>
                </tr>
                <tr>
                  <td>Alien</td>
                  <td>---</td>
                  <td>---</td>
                  <td>---</td>
                  <td>Tueur pro</td>
                  <td>---</td>
                </tr>
                <tr>
                  <td>Dark Vador</td>
                  <td>Anakin</td>
                  <td>50</td>
                  <td>Super Star Destroyer</td>
                  <td>Bras droit de Palpatine</td>
                  <td>Dîplome de Jedï</td>
                </tr>
                <tr>
                  <td>Alain De Loin</td>
                  <td>---</td>
                  <td>Inconnu</td>
                  <td>Loin</td>
                  <td>Acteur</td>
                  <td>Néant</td>
                </tr>
                <tr>
                  <td>Jons</td>
                  <td>Indianas</td>
                  <td>70</td>
                  <td>Au bout du monde</td>
                  <td>Archéologue</td>
                  <td>Master Archéologie</td>
                </tr>
                <tr>
                  <td>Palpatine</td>
                  <td>---</td>
                  <td>Vieux débris</td>
                  <td>Etoile noir</td>
                  <td>Empereur</td>
                  <td>Bac -10</td>
                </tr>
              </tbody>
            </table>
          </article>
          <aside></aside>
        </section>
     
        <section></section>
        <footer></footer>
      <script src="scripts.js"></script>
      </body>
    </html>

  2. #2
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2019
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2019
    Messages : 25
    Points : 33
    Points
    33

    Par défaut

    Salut, il me semble que ton problème se situe au niveau de :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     <colgroup >
    <col class="col1"/>
    <col class="col2"/>
    <col class="col3"/>
    <col class="col4"/>
    <col class="col5"/>
    <col class="col6"/>
    </colgroup>

    En effet si tu augmente le poids du td de la manière suivante :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .col1 td{
      background-color: blueviolet;  /*Ici le poid est de 0, 1, 1*/
    }
    Le problème se résout sauf pour la colonne du tfoot qui se colore car elle fait aussi partie de la classe .col1.
    Il y a quelque chose qui augmente le poids du td ou diminue celui de ta classe.

    J'ai simplifié par un retrait du colgroup, placement du tfoot après le tbody et remplacement du CSS.
    Une solution est donc :
    HTML :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="styles.css" type="text/css">
        <title>First tableau</title>
      </head>
     
      <body>
        <header>
          <a id=linkCaseImg href="linkCaseImg" target="_blank">
            <img id=linkImgSrc src="linkImgSrc" alt="Mon image" />
          </a>
        </header>
     
        <nav></nav>
     
        <section>
          <article>
            <table>
              <caption >My Array</caption>
              <thead>
                <tr>
                  <th>Nom</th>
                  <th>Prénom</th>
                  <th>Age</th>
                  <th>Adresse</th>
                  <th>Profession</th>
                  <th>Diplôme</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Terminator</td>
                  <td>---</td>
                  <td>---</td>
                  <td>Terre</td>
                  <td>Tueur pro</td>
                  <td>---</td>
                </tr>
                <tr>
                  <td>Alien</td>
                  <td>---</td>
                  <td>---</td>
                  <td>---</td>
                  <td>Tueur pro</td>
                  <td>---</td>
                </tr>
                <tr>
                  <td>Dark Vador</td>
                  <td>Anakin</td>
                  <td>50</td>
                  <td>Super Star Destroyer</td>
                  <td>Bras droit de Palpatine</td>
                  <td>Dîplome de Jedï</td>
                </tr>
                <tr>
                  <td>Alain De Loin</td>
                  <td>---</td>
                  <td>Inconnu</td>
                  <td>Loin</td>
                  <td>Acteur</td>
                  <td>Néant</td>
                </tr>
                <tr>
                  <td>Jons</td>
                  <td>Indianas</td>
                  <td>70</td>
                  <td>Au bout du monde</td>
                  <td>Archéologue</td>
                  <td>Master Archéologie</td>
                </tr>
                <tr>
                  <td>Palpatine</td>
                  <td>---</td>
                  <td>Vieux débris</td>
                  <td>Etoile noir</td>
                  <td>Empereur</td>
                  <td>Bac -10</td>
                </tr>
              </tbody>
              <tfoot><td colspan="6">SPOIL</td></tfoot>
            </table>
          </article>
          <aside></aside>
        </section>
     
        <section></section>
        <footer></footer>
      <script src="scripts.js"></script>
      </body>
    </html>

    CSS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    tbody td:nth-child(1),th:nth-child(1){
      background-color: blueviolet;  /*Ici le poid est de 0, 1, 1*/
    }
    tfoot td{
      background-color: red;
    }
    Si l’intérêt du colgroup était simplement d'appliquer des couleurs différents a tes divisions de table, il est préférable de te rapprocher des pseudo-classes CSS : https://developer.mozilla.org/fr/doc...Pseudo-classes.

    J’espère avoir répondu a ta question

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 665
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 665
    Points : 33 408
    Points
    33 408

    Par défaut

    Bonjour,
    Pourquoi le poid du sélecteur de la classe qui est plus important ne prend pas le dessus sur celui de la balise ?
    le rendu des <table> est un rendu par couche, comme le montre la figure ci dessous
    le poids des sélecteurs n'est donc pas prioritaire sur la couche qui se trouve au dessus, si non transparente, ce qui est le cas dans ce que tu souhaites faire.

    Pour test :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    thead {
        background: #ABC;  /* poids 0-0-1 */
    }
    tfoot {
        background: #EEE;  /* poids 0-0-1 */
    }
    .col1 {
        background: aqua;  /* poids 0-1-0 */
    }
    Ressource :
    17.5.1 Table layers and transparency

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    avril 2011
    Messages
    247
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2011
    Messages : 247
    Points : 98
    Points
    98

    Par défaut

    D'accord, merci beaucoup à vous deux pour votre aide.

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

Discussions similaires

  1. 'SHOW TABLES' marche pas sous postgresql !?
    Par fet dans le forum PostgreSQL
    Réponses: 4
    Dernier message: 13/05/2004, 09h28
  2. Maximiser fenêtre ne marche pas
    Par sandrinec dans le forum Composants VCL
    Réponses: 2
    Dernier message: 12/06/2003, 12h02
  3. Réponses: 9
    Dernier message: 07/05/2003, 12h57
  4. [GifDecoder] marche pas dans applet avec IE
    Par formentor dans le forum Applets
    Réponses: 2
    Dernier message: 06/05/2003, 10h43
  5. Sysdate qui marche pas ??
    Par StouffR dans le forum Langage SQL
    Réponses: 4
    Dernier message: 28/08/2002, 13h23

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