web-dev-qa-db-fra.com

CSS - Bordure uniquement à l'intérieur du tableau

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 la table entière et aussi entre les cellules de la table. Ce que je veux réaliser 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;
}
htmlcssxhtmlhtml-tableborder
186
Richard Knop

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 la fait apparaître comme si vous aviez une bordure autour du tableau entier.

À votre santé.

EDIT: Vous trouverez un peu plus d’informations sur ces pseudo-classes sur quirksmode , et, comme on pouvait s’y attendre, vous êtes à peu près S.O.L. en termes de IE support.

194
theIV

cela fonctionne pour moi:

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

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

voir exemple ...

testé dans FF 3.6 et Chrome 5.0, IE ne prend pas en charge; à partir de W3C :

Les frontières avec le "style de bordure" de "caché" ont priorité sur toutes les autres frontières en conflit. Toute bordure avec cette valeur supprime toutes les frontières à cet emplacement.

184
anthonyrisinger

Exemple de très simple moyen 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>
40
jony

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

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 apprendre davantage sur les pseudo-classes CSS 2.1 à l'adresse suivante: http://msdn.Microsoft.com/en-us/library/cc351024 (VS.85) .aspx

11
Crisboot

Pour le balisage de table ordinaire, voici une solution courte qui fonctionne sur tous les périphériques/navigateurs de BrowserStack, à l'exception de IE 7 et des versions suivantes:

table { border-collapse: collapse; }

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

Pour le support 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

10
dalgard

cela devrait fonctionner:

table {
 border:0;
}

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

modifier:

je viens de l'essayer, pas de bordure de table. mais si je mets une bordure de table, elle est éliminée par l'effondrement de la bordure.

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>
5
Rufinus

ça va tout faire sans css <TABLE BORDER=1 RULES=ALL FRAME=VOID>

code from: HTML CODE TUTORIAL

3
TwoFaceZ

Fonctionne avec toutes les combinaisons 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>
0
user1119279

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/

0
Brian