Suppression des bordures de cellule de tableau indésirables avec CSS

J'ai un problème particulier et frustrant. 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'applique différentes valeurs de couleur d'arrière-plan aux éléments thead , tr et tr impair. Le problème est que dans la plupart des navigateurs, chaque cellule a une bordure indésirable qui ne correspond à aucune des lignes du tableau. Ce n'est que dans Firefox 3.5 que le tableau n'a de bordures dans aucune cellule.

Je voudrais simplement savoir comment supprimer ces bordures dans les autres principaux navigateurs afin que la seule chose que vous voyez dans le tableau soit les couleurs de ligne alternées.

Vous devez ajouter ceci à votre CSS:

table { border-collapse:collapse }

ajoutez du CSS:

td, th {
   border:none;
}

Modifiez votre 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;
}

pour supprimer la bordure, juste en utilisant css comme ceci:

td {
 border-style : hidden!important;
}

Définissez l' cellspacingattribut 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 anciennes versions d'IE.

Vous pouvez également ajouter

table td { border:0; }

ce qui précède équivaut à définir cellpadding = "0"

il supprime le remplissage automatiquement ajouté aux cellules par les navigateurs qui peuvent dépendre du doctype et / ou de tout CSS utilisé pour réinitialiser les styles de navigateur par défaut

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

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

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

Ressemblant ainsi à ceci après:

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

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

Essayez d'attribuer le style de border: 0px; border-collapse: collapse;à l'élément de table.

parfois même après avoir effacé l' borderart.

la raison est que vous avez des images à l'intérieur du td, donner les images le display:blockrésout.