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

Je suis à essayer de comprendre comment ajouter de la frontière qu'à l'intérieur de la table. Quand je fais:

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

La frontière est autour de la table et aussi entre les cellules de tableau. Ce que je veux réaliser est d'avoir des frontières qu'à l'intérieur de la table autour des cellules de tableau (sans bordure autour de la table).

Ici est de balisage j'utilise pour les tables (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 I s'appliquent à la plupart de mes tables:

table {
    border-collapse: collapse;
    border-spacing: 0;
}
  • Je ne vois que des frontières autour des cellules. Puisque chacune des cellules ont une frontière, il semble que la table a une frontière. Peut-être que je ne comprends pas la question?
  • Aussi appelé frontières intérieures.
InformationsquelleAutor Richard Knop | 2009-08-10
  1. 198

    Si vous faites ce que je crois que vous êtes en train 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;
}

    jsFiddle Démo

    Le problème, c'est que vous définissez une "frontière" autour de toutes les cellules, qui font paraître comme si vous avez une bordure autour de l'ensemble de la table.

    Acclamations.

    EDIT: UN peu plus d'infos sur ces pseudo-classes peuvent être trouvés sur quirksmode, et, comme attendu, vous êtes assez bien S. O. L. en termes d'IE de soutien.

    • Avec de simples tableaux de ce genre, il y a une beaucoup plus courte, une solution qui évite à l'aide de pseudo-classes en utilisant le frère suivant combinator. Voir ma réponse.
    • avec cet être répondu à 5 ans, est-il un "nouveau" / "plus efficace" façon que cela?
    • Ne fonctionne pas si vous utilisez jamais rowspan sur la première colonne dans une table.
    InformationsquelleAutor theIV
  2. 188

    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 Chrome 5.0, c'est à dire manque de soutien; de W3C:

    Frontières avec le 'border-style' de 'hidden' a préséance sur toute autre conflit de frontières. Toute frontière, avec cette valeur supprime toutes les frontières à cet endroit.

    • Tant que vous n'avez pas besoin d'une bordure de tableau, c'est certainement la solution la plus élégante.
    InformationsquelleAutor anthonyrisinger
  3. 41

    Exemple d'un très simple façon pour vous d'obtenir l'effet désiré:

    <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>
    • "MAGIC", a EXPLIQUÉ: frame et rules sont VIEUX (pas HTML5) table attributs (il faut utiliser le CSS à la place). frame dit quelles sont les parties de hors les bordures du tableau doit être visible - void moyen de masquer tous à l'extérieur des frontières... rules dit quelles sont les parties de à l'intérieur les bordures du tableau doit être visible - all tous... évidemment... s'il vous Plaît ne pas l'utiliser, sauf si vous êtes HTML3 fanatique ... 🙂
    • L'ajout de quelque chose comme border: 1px solid black assurez-vous que l'extérieur de la bordure de la table devient une frontière.
    InformationsquelleAutor jony
  4. 11

    En raison de mantain compatibilité avec ie7, ie8, je vous conseille d'utiliser d'abord l'enfant et non pas le dernier enfant de 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 CSS 2.1 Pseudo-classes:
    http://msdn.microsoft.com/en-us/library/cc351024(SV.85).aspx

    • C'est une excellente solution. Mais attention, si vous avez une autre table dans l'un de vos cellules de tableau et pour voir les frontières de l'intérieur vous avez besoin d'un autre ensemble de lignes CSS pour votre "intérieur" de la table
    InformationsquelleAutor Crisboot
  5. 10

    De table ordinaire de balisage, voici une petite solution qui fonctionne sur tous les appareils/les navigateurs sur BrowserStack, sauf IE 7 et ci-dessous:

    table { border-collapse: collapse; }

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

    Pour IE 7, ajouter 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

    • Grand - que cela permet aussi de définir une bordure différente de la table, d'objectivité que juste de ne pas l'afficher.
    InformationsquelleAutor dalgard
  6. 5

    cela devrait fonctionner:

    table {
 border:0;
}

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

    edit:

    je l'ai juste essayé, pas de table de la frontière. mais si j'ai mis une bordure de tableau, il est éliminé par le border-collapse.

    c'est le testfile:

    <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>
    • Non, ce n'est pas travaillé, je l'ai essayé. Je vais éditer mon premier post.
    InformationsquelleAutor Rufinus
  7. 3

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

    code à partir de: CODE HTML TUTORIEL

    InformationsquelleAutor TwoFaceZ
  8. 0

    Ajouter une bordure à chaque cellule avec ceci:

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

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

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

    Supprimer la bordure gauche à partir de cellules de la première colonne:

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

    Supprimer la bordure droite de l'cellules dans la dernière colonne:

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

    Supprimer la bordure inférieure de cellules dans la dernière ligne:

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

    http://jsfiddle.net/hzru0ytx/

    InformationsquelleAutor Brian
  9. 0

    Fonctionne pour n'importe quelle combinaison de tbody/thead/tfoot et td/th

    CSS:

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

    HTML:

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

    InformationsquelleAutor user1119279