web-dev-qa-db-fra.com

Supprimer les bordures de cellules de tableau non désirées 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 de fond 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 n’est la couleur d’aucune des lignes du tableau. Seulement dans Firefox 3.5, la table n'a pas de bordures dans aucune cellule.

Je voudrais juste savoir comment supprimer ces bordures dans les autres principaux navigateurs, de sorte que la seule chose que vous voyez dans le tableau soient les couleurs alternées des lignes.

htmlcsshtml-table
76
Bob

Vous devez ajouter ceci à votre CSS:

table { border-collapse:collapse }
194
Doug Neiner

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;
}
13
Gabriel McAdams

ajouter des css:

td, th {
   border:none;
}
12
Dave Markle

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.

8
SLaks

pour supprimer la bordure, utilisez juste css comme ceci:

td {
 border-style : hidden!important;
}
6
Amine_Dev

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 fichier style.css d'un thème enfant (effectuez une opération "Rechercher" pour localiser chacune d'elles. 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;
}
1
Jessica Escobar

Vous voudrez peut-être aussi ajouter

table td { border:0; }

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

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

1
falc0n

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

0
Josh Anderson