Comment assigner la classe aux colonnes

Question

j'ai comme 100 lignes, mais je ne veux pas affecter la classe ABC1, abc2, ABC3, ABC4 individuellement ...

Est-il possible d'assigner automatiquement la classe TD selon UPONT la colonne no ie Column1 - ABC1 Colonne2 - abc2 ..etc

<Table> 
<tr class="odd"> 
    <td class="abc1"> ...</td> 
    <td class="abc2"> ...</td> 
    <td class="abc3"> ...</td> 
    <td class="abc4"> ...</td> 
</tr> 

<tr class="even"> 
    <td class="abc1"> ...</td> 
    <td class="abc2"> ...</td> 
    <td class="abc3"> ...</td> 
    <td class="abc4"> ...</td> 
</tr> 

<tr class="odd"> 
    <td class="abc1"> ...</td> 
    <td class="abc2"> ...</td> 
    <td class="abc3"> ...</td> 
    <td class="abc4"> ...</td> 
</tr> 

</table> 

Toute aide est appréciée.

Hmm ... Merci pour toutes les réponses Guys .. On dirait qu'il n'y a aucun moyen de le faire à travers CSS. Oui, je l'ai juste ajouté au serveur html .. mais je regardais juste si je peux éviter cela.

Je ne veux pas le faire avec javascript .. Merci pour les réponses againg Guys !!!!!!!!

Appréciez votre aide.

Merci, Ben

Answer 1

pas si vous voulez une solution multi-navigateur, mais si le support pour Internet Explorer n'est pas un problème, vous pouvez utiliser la: règle n-ième enfant. Voir here et here. Vous pouvez également le faire avec une bibliothèque JavaScript telle que jQuery.

Answer 2

Vous pourriez le faire avec Javascript ou un framework comme jQuery mais, après avoir moi-même fait cette route, je ne le ferais pas. La raison en est la rapidité: je faisais des lignes bizarres avec JQuery et il fallait entre 100 et 500 ms pour charger la page (entre ça et quelques autres). C'est (imho) inacceptable longtemps pour quelque chose qui peut être fait sur le serveur.

Si vous êtes prêt à vivre avec cela, alors allez-y. CSS a un sélecteur: nth-child (n) mais qui n'est pas supporté par IE6. Personnellement, je générerais les classes dans le cadre du HTML sur le serveur.

Avec jQuery, vous pouvez le faire:

<script type="text/javascript"> 
$(function() { 
    $("table tbody tr :first-child").addClass("abc1"); 
    $("table tbody tr :nth-child(2)").addClass("abc2"); 
    // etc 
}); 
</script> 

L'avantage de jQuery est qu'il utilise CSS2.1 et certains sélecteurs CSS3 et personnalisés, mais il ne se soucie pas de ce que le navigateur prend en charge comme il prend en charge ce le navigateur ne le fait pas.

Answer 3

Il existe les étiquettes col et colgroup xhtml.
En savoir plus sur eux.

En outre, il y a:

#your-table tr td:first-child  //will target first td 
#your-table tr td:first-child+td //will target the all the second td 
#your-table tr td:first-child+td+td //will target the all the thired td 

vous obtenez la dérive

Answer 4

Oui - si vous utilisez un langage côté serveur comme PHP ou ASP.NET. Voici la solution en PHP, en supposant précisément 100 colonnes:

for($i=0; $i < 100; $i++) 
{ 
    echo "<td class=\"abc$i\">your content here.</td>"; 
} 

Depuis PHP analysera les chaînes et insérer la valeur littérale des variables PHP, chaque itération de cette boucle incrémente votre classe par la valeur de $ i, à savoir abc0, abc1, abc2 etc.

Cela va accomplir ce que vous voulez. Cependant, je réalise que je n'ai aucune idée de ce que vous construisez, mais je remets en question la décision de conception qui exige 100 colonnes, dont chacune doit être stylisée différemment. Je serais intéressé de voir votre implémentation finale.

KN

Answer 5

Les colonnes sont effectivement pris en charge en HTML et CSS en utilisant les <colgroup> et <col> tags: voir http://htmldog.com/guides/htmladvanced/tables/
Ajouter ce au début de votre table:

<table> 
    <colgroup> 
    <col class="class1" /> 
    <col class="class2" /> 
    <col class="class3" /> 
    <col class="class4" /> 
    </colgroup> 
    ... 
</table>