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>
OriginalL'auteur vinomarky | 2012-02-08
Vous devez vous connecter pour publier un commentaire.
Il est possible que ce que vous décrivez est cellspacing. Si c'est le cas, essayez ceci dans votre code HTML:
Cellspacing se réfère à l'espace entre les cellules; ce n'est pas une frontière exactement. Donc, si vous êtes témoins de l'invisible ou de non-coloré espaces entre vos tds, essayez d'ajouter la cellspacing="0" attribut à votre balise table.
Yay. C'était ma première accepté de répondre sur Pile 🙂 Merci à vous!
OriginalL'auteur Tracy Fu
À l'aide de
cellspacing="0"
est en effet un moyen infaillible pour se débarrasser de ces satanés lignes. Mais, personnellement, je n'ai jamais aimé ça - parce que je dois l'appliquer dans chaque tableau et chaque que je crée un site, au lieu de dans l'une des plus intéressantes, centralisé spot.Donc, j'ai l'habitude d'aller pour une solution comme elclanrs dans un fichier CSS. La chose cool à propos de cette solution est que vous pouvez supprimer certaines des balises avant de lui appliquer des lignes de frontières pour que ceux-là.
Donc, en d'autres termes, de mettre un cadre autour d'une table, sans avoir toutes les cellules classés entre les lignes trop - vous pouvez faire quelque chose comme ceci:
Bonne chance!
OriginalL'auteur Jeff Mahoney
Vous pouvez également utiliser ce style:
OriginalL'auteur TheGeekYouNeed
Essayer cette
OriginalL'auteur NewUser
#table1 table, tr, td, th {}
est faux.Que vous devez faire:
Essayez-le avec la cellpadding d'autres solutions sont à poster.
OriginalL'auteur elclanrs
Il me semble que vous êtes en appliquant le style de tables dans table1. La première déclaration doit être réellement:
#1 {
border: 0;
}
ou
tableau #1 {
border: 0;
}
OriginalL'auteur Christophe
Quel navigateur utilisez-vous? Pour compléter la rétrocompatibilité vous avez encore besoin de la
cellspacing="0"
attribut défini sur la table.http://jsfiddle.net/RmhxH/
OriginalL'auteur Ricardo Tomasi
Essayez ceci:
OriginalL'auteur Sriram Sundarajan