Rayure zébrée sur une seule colonne de table

Question

J'ai une table qui utilise un trieur de tables et des rayures zébrées pour les lignes du tableau.Je voudrais ajouter des rayures zébrées à une seule des COLONNES du tableau pour lui donner un peu d'importance.comme ça:

Answer 1

Si vous connaissez l'index de colonne de celle que vous souhaitez séparer, vous pouvez le faire uniquement en CSS, en utilisant des sélecteurs :nth-of-type comme ceci :

tr:nth-of-type(even) td:nth-of-type(3) { background: rgba(0,0,0,0.1); }

(Où 3 est utilisé comme espace réservé pour l'index de votre colonne cible)

Une autre option serait de placer une classe sur l'en-tête (ou le premier td) de la colonne que vous souhaitez répartir, puis d'utiliser JS pour répartir les autres tds dans la même colonne :

var col_to_stripe = $('th.stripe-this-one').index();

$('table.selectively-stripe').find('tr:odd')
  .each(function() {
    $(this).children('td')
      .eq(col_to_stripe)
      .css('background', 'pink');
  });

La classe n'est pas nécessaire car vous pouvez évidemment simplement mettre l'index de colonne souhaité comme avec l'approche CSS pure, mais c'est mieux pour la clarté du code.

démo ici : http://jsbin.com/axutal/2/edit

Answer 2

Vérifiez ce lien

Ceci peut être fait en utilisant jQuery sans donner des noms de classe ou des identifiants.

 $('tr:odd  td:nth-child(4)').css('background','#999999'); /* For odd td's */
 $('tr:even td:nth-child(4)').css('background','#DDDDDD'); /* For even td's */  

Pour plus d'informations sur ce jQuery Selector passer par ce link

Answer 3

Vous aurez besoin d'un nom de classe supplémentaire et d'une déclaration CSS correspondante pour la TDS dans cette colonne.