Comment puis-je appliquer une bordure uniquement à l'intérieur d'un tableau?

195

J'essaie de comprendre comment ajouter une bordure uniquement à l'intérieur du tableau. Quand je fais:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

La bordure est autour de l'ensemble du tableau et également entre les cellules du tableau. Ce que je veux réaliser, c'est d'avoir une bordure uniquement à l'intérieur du tableau autour des cellules du tableau (sans bordure extérieure autour du tableau).

Voici le balisage que j'utilise pour les tableaux (même si je pense que ce n'est pas important):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

Et voici quelques styles de base que j'applique à la plupart de mes tableaux:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html css html-table border Richard Knop
la source

Je ne vois que les frontières autour des cellules. Puisque chacune des cellules a une bordure, il semble que le tableau ait une bordure. Peut-être que je ne comprends pas la question?

Chetan S

3

Aussi appelées frontières intérieures .

Escargot mécanique du

203

Si vous faites ce que je crois que vous essayez de faire, vous aurez besoin de quelque chose d'un peu plus comme ceci:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

Démo jsFiddle

Le problème est que vous définissez une «bordure complète» autour de toutes les cellules, ce qui donne l'impression d'avoir une bordure autour de la table entière.

À votre santé.

EDIT: Un peu plus d'informations sur ces pseudo-classes peuvent être trouvées sur quirksmode , et, comme on pouvait s'y attendre, vous êtes à peu près SOL en termes de support IE.

theIV
la source

Avec des tables simples comme celle-ci, il existe une solution beaucoup plus courte qui évite d'utiliser des pseudo-classes en utilisant le combinateur frère suivant. Voyez ma réponse.

dalgard

1

@theIV, avec cette réponse il y a plus de 5 ans, y a-t-il un moyen «nouveau» / «plus efficace» que cela?

jbutler483

Ne fonctionne pas si vous utilisez une plage de lignes sur la première colonne d'une table.

Jack

192

cela fonctionne pour moi:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

voir l'exemple ...

testé dans FF 3.6 et Chromium 5.0, IE manque de support; du W3C :

Les frontières avec le «style frontière» de «caché» ont priorité sur toutes les autres frontières conflictuelles. Toute bordure avec cette valeur supprime toutes les bordures à cet emplacement.

anthonyrisinger
la source

1

Tant que vous n'avez pas besoin d'une bordure de table, c'est certainement la solution la plus élégante.

cjroth

42

Exemple d'un moyen très simple pour vous d'obtenir l'effet souhaité:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

jony
la source

13

"MAGIC" EXPLIQUÉ: frame et rulessont des attributs ANCIENS (pas HTML5) table (vous devriez utiliser CSS à la place). frameindique quelles parties des bordures extérieures du tableau doivent être visibles - voidsignifie cacher toutes les bordures extérieures ... rulesindique quelles parties des bordures intérieures du tableau doivent être visibles - allsignifie toutes ... évidemment ... Veuillez ne pas l'utiliser, sauf si vous sont fanatiques de HTML3 ... :)

jave.web

1

Ajouter quelque chose comme une bordure: 1px noir uni fera en sorte que la limite extérieure de la table reçoive une bordure.

Aaron Liu

1

A travaillé comme un charme en 2020 pour ajouter rapidement une certaine lisibilité à un tableau ridiculement espacé dans un site Web que je lisais. En fait, cela suffisait pour les frontières intérieures: rules = "all"

Edoardo Facchinelli

11

En raison de la compatibilité de mantain avec ie7, ie8, je suggère d'utiliser le premier enfant et non le dernier enfant pour faire ceci:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

Vous pouvez en savoir plus sur les pseudo-classes CSS 2.1 à l' adresse : http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Crisboot
la source

C'est une excellente solution. Mais attention, si vous avez un autre tableau dans l'une de vos cellules de tableau et que vous voulez voir les bordures intérieures, vous avez besoin d'un autre ensemble de lignes CSS pour votre tableau "intérieur"

Michael Biermann

10

Pour le balisage de table ordinaire, voici une solution courte qui fonctionne sur tous les appareils / navigateurs sur BrowserStack, sauf IE 7 et les versions antérieures:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

Pour la prise en charge d'IE 7, ajoutez ceci:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

Un cas de test peut être vu ici: http://codepen.io/dalgard/pen/wmcdE

Dalgard
la source

Génial - car cela permet également de définir une bordure différente pour la table, plutôt que de ne pas l'afficher.

jsbueno

5

cela devrait fonctionner:

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

Éditer:

je viens de l'essayer, pas de bordure de table. mais si je place une bordure de table, elle est éliminée par le border-collapse.

c'est le fichier de test:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>

Rufinus
la source

Non ça ne marche pas, j'ai essayé ça. Je vais éditer mon premier message.

Richard Knop

3

qui fera tout sans css <TABLE BORDER=1 RULES=ALL FRAME=VOID>

code de: HTML CODE TUTORIAL

TwoFaceZ
la source

0

Ajoutez la bordure à chaque cellule avec ceci:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

Supprimez la bordure supérieure de toutes les cellules de la première ligne:

table > tbody > tr:first-child > td { border-top: 0; }

Supprimez la bordure gauche des cellules de la première colonne:

table > tbody > tr > td:first-child { border-left: 0; }

Supprimez la bordure droite des cellules de la dernière colonne:

table > tbody > tr > td:last-child { border-right: 0; }

Supprimez la bordure inférieure des cellules de la dernière ligne:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

Brian
la source

0

Fonctionne pour toute combinaison de tbody / thead / tfoot et td / th

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}

<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>

Développer l'extrait

user1119279
la source

Comment puis-je appliquer une bordure uniquement à l'intérieur d'un tableau?

Réponses: