Comment faire table frontières invisibles avec les CSS

Je sais que c'est souvent posé la question, mais j'ai essayé quelques solutions (comme Comment faire la séparation des lignes de bordures d'un tableau disparaître avec le CSS?) mais je n'ai pas encore tout à fait le faire.

J'ai défini via css, la structure d'une table avec une alternance de lignes de couleurs. Je voudrais (en particulier à la verticale), les frontières entre les cellules d'être invisible et supposons donc que j'ai besoin d'un zéro td largeur de la bordure, ou l'alternance de td couleurs de bordure à être les mêmes que les couleurs d'arrière-plan.

Exemple ci-dessous est ce que j'ai essayé, dans l'appel d'une table1 id de l'html, je reçois une belle alternance de couleur de ligne de la table, mais avec une évidente bordures de cellule encore reconnaissant de votre aide.

#table1 table, tr, td, th {
     border: 0;
}

#table1 tbody tr:nth-child(odd) {
     background-color: #A3B9D2; 
}

#table1 tbody tr:nth-child(even) {
     background-color: #E7EDF3;
}

puis de l'échantillon html;

<table id="table1" >
   <tr>
     <td>Test</td><td>(value)</td>
   </tr>
   <tr>
     <td>Test2</td><td>(value2)</td>
   </tr>
</table>
Je suis sûr que vous avez raison - qu'est-ce que la bonne façon de définir le zéro épaisseur de la bordure entre les éléments de colonne? J'avais essayé de table, tr, td, th { border: 0;} sans le #table1 et ça ne fonctionne pas non plus. J'ai aussi essayé de mettre border:0; dans chacun de la couleur alternant des sections, mais sans succès. Ne pas être à la vitesse sur CSS j'espérais que quelqu'un prenne pitié de moi 😉 ;

OriginalL'auteur vinomarky | 2012-02-08