Supprimer les bordures de cellules de tableau non désirées avec CSS

Question

J'ai une étrange et frustrant problème. Pour le balisage simple:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

J'ai appliquer différents background-color valeurs du thead, tret tr impair d'éléments. Le problème est que dans la plupart des navigateurs, chaque cellule a un indésirable frontière qui n'est pas la couleur de l'une des lignes de la table. Uniquement dans Firefox 3.5 la table n'ont pas de frontières dans toute la cellule.

Je voudrais juste savoir comment faire pour supprimer ces frontières dans les autres grands navigateurs de sorte que la seule chose que vous voyez dans le tableau sont les la ligne alternant les couleurs.

Merci.

Answer 1

Vous devez ajouter ceci à votre CSS:

 table { border-collapse:collapse }
 

Answer 2

Modifiez votre code HTML comme ceci:

 <table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>
 

(J'ai ajouté border = "0" cellpadding = "0" cellspacing = "0")

En CSS, vous pouvez effectuer les opérations suivantes:

 table {
    border-collapse: collapse;
}
 

Answer 3

ajouter des css:

 td, th {
   border:none;
}
 

Answer 4

Définissez l'attribut cellspacing de la table sur 0 .

Vous pouvez également utiliser le style CSS border-spacing: 0 , mais uniquement si vous n'avez pas besoin de prendre en charge les versions antérieures d'IE.

Answer 5

Après avoir essayé les suggestions ci-dessus, la seule chose qui a fonctionné pour moi a été de changer l'attribut border en "0" dans les sections suivantes du style.css d'un thème enfant (effectuez une opération "Rechercher" pour localiser chacun d'eux. extraits):

 .comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}
 

Ainsi, ressemblant à ceci après:

 .comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}