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

87

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.

html css html-table

— Bob
source

2

Merci à tous ceux qui ont suggéré d'ajouter border-collapse: collapse au CSS. Cela l'a fait.

— Bob

210

Vous devez ajouter ceci à votre CSS:

table { border-collapse:collapse }

— Doug Neiner
source

13

Notez que cela doit être appliqué à la table , pas aux td . Je viens de faire cette erreur et j'ai passé plus d'une demi-heure à essayer de comprendre pourquoi cela ne fonctionnait pas.

— javawizard

16

ajoutez du CSS:

td, th {
   border:none;
}

— Dave Markle
source

1

ne fonctionne pas pour moi sur le chrome 60.0.3112.113 lorsqu'il est appliqué à la table

— Abdullah Gheith

15

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

— Gabriel McAdams
source

12

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

td {
 border-style : hidden!important;
}

— Amine_Dev
source

8

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.

— SLaks
source

1

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

— falc0n
source

1

Cellpadding est l'espace entre le contenu de la table et ses limites td{padding:X}. L'espacement des cellules est l'espace entre les bourdries de chaque cellule («marge» entre les bordures des cellules). Vous pouvez définir border-collapsepour imiter ce que fait l' cellspacingattribut sur la balise de table, mais ce n'est pas infaillible.

— MetalFrog

1

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

— Jessica Escobar
source

0

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

— Josh Anderson
source

3

@Josh n'est-ce pas border: none?

— Doug Neiner du

@DougNeiner Ancien message, mais aucun et 0 sont tous deux également valides. J'aime 0 parce que je dois taper moins :)

— Scott Simontis

-1

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.

— développeur
source