Comment appliquer un remplissage à une colonne en utilisant <col> et CSS dans Firefox?

Exemple:Comment appliquer un remplissage à une colonne en utilisant <col> et CSS dans Firefox?

<style type="text/css"> 
    table { 
     border: 1px solid red; 
     border-collapse: collapse; 
     text-align: left; 
    } 
    #col-1 { 
     padding-left: 20px; 
     background-color: tan; 
    } 
    #specific-cell { 
     padding-left: 20px; 
    } 
</style> 
<table> 
    <col id="col-1"> 
    <col id="col-2"> 
    <tr> 
     <th>foo</th> 
     <th>bar</th> 
    </tr> 
    <tr> 
     <td>data1</th> 
     <td>data2</th> 
    </tr> 
    <tr> 
     <td id="specific-cell">data1</th> 
     <td>data2</th> 
    </tr> 
    <tr> 
     <td>data1</th> 
     <td>data2</th> 
    </tr> 
</table>

La couleur est appliquée à la colonne, mais pas le rembourrage. Si j'utilise des classes/id sur des cellules directement, cela fonctionne.

Suis-je obligé de les utiliser ou est-il possible de tirer parti de l'étiquette <col>?

Source

2009-05-15 mark

Ce n'est pas censé fonctionner, à moins avec CSS 2.1. Vous pouvez jeter un oeil à la CSS 2.1 table columns specification.

Vous pouvez contourner cela en utilisant :first-child et +:

/* first column */ 
td:first-child { 
    padding-left: 20px; 
} 

/* second column */ 
td:first-child + td { 
    padding-left: 10px; 
} 

/* third columns */ { 
td:first-child + td + td { 
    padding-left: 0; 
}

Source

2009-05-15 11:55:51 amain

Réponse très perspicace, merci! – mark

Cela fonctionne pour moi dans IE avec le DOCTYPE suivant

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

et les styles

#col-1 { 
    padding-left: 50px; 
    background-color: tan; 
} 
#col-2 { 
    padding-left: 100px; 
    background-color: lightgreen; 
}

Qu'est-ce que doctype utilisez-vous ... et quel navigateur utilisez-vous ...

hmm ... juste vérifié ne semble pas fonctionner dans Firefox

Source

2009-05-15 10:58:43

Comment inutile sans les informations du navigateur, je suis Pardon. Oui, c'est FF, je l'ai ajouté à la question. – mark

réponse Alex travaille pour moi, sauf que c'est pas très évolutive pour beaucoup de colonnes et devient rapidement difficile à lire. J'ai fini par utiliser :nth-of-type(n) à la place, mais ce sélecteur a été introduit dans CSS3.

Sélecteur: :nth-of-type(n)
Exemple: p:nth-of-type(2)
Résultat: Sélectionne tous les éléments <p> qui est le deuxième élément <p> de son parent

Exemple:

/*column 1*/ 
#myTable td:nth-of-type(1) 
{ 
    padding-left: 20px; 
    background-color: tan; 
} 
/*column 2*/ 
#myTable td:nth-of-type(2) 
{ 
    padding-left: 10px; 
}

Source

2013-11-12 20:17:26 johntrepreneur

Comment appliquer un remplissage à une colonne en utilisant <col> et CSS dans Firefox?

Répondre

Questions connexes