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

Question

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

Demandé el 10 de Août, 2009: Quand la question a-t-elle été
128284 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

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

La bordure entoure l'ensemble du tableau et se trouve également entre les cellules du tableau. Ce que je veux réaliser, c'est 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;
}

Demandé el 10 de Août, 2009 par Richard Knop

0 votes

Je ne vois que des bordures autour des cellules. Comme chacune des cellules a une bordure, il semble que le tableau ait une bordure. Peut-être n'ai-je pas compris la question ?

Commenté el 11 de Août, 2009 par Chetan Sastry

3 votes

Également appelé frontières intérieures .

Commenté el 11 de Janvier, 2012 par Mechanical snail

Answer 1

5 Réponses

Answer 2

218voto

theIV Points 12999

Si vous faites ce que je crois que vous essayez de faire, vous aurez besoin de quelque chose d'un peu plus semblable à 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émonstration de jsFiddle

Le problème est que vous définissez une "bordure complète" autour de toutes les cellules, ce qui donne l'impression que vous avez une bordure autour de l'ensemble du tableau.

A la vôtre.

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

Répondu el 10 de Août, 2009 par theIV (12999 Points )

0 votes

Avec des tableaux simples comme celui-ci, il existe une solution beaucoup plus courte qui permet d'éviter l'utilisation de pseudo-classes en utilisant le combinateur du frère suivant. Voir ma réponse.

Commenté el 31 de Août, 2014 par dalgard

1 votes

@theIV, la réponse à cette question datant d'il y a plus de 5 ans, existe-t-il une nouvelle méthode plus efficace ?

Commenté el 7 de Novembre, 2014 par jbutler483

2 votes

Cela ne fonctionne pas si vous utilisez le rowspan sur la première colonne d'un tableau.

Commenté el 21 de Juillet, 2015 par Jack

Answer 3

211voto

anthonyrisinger Points 1245

Cela fonctionne pour moi :

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

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

exemple de vue ...

testé dans FF 3.6 et Chromium 5.0, IE n'est pas pris en charge ; à partir de W3C :

Les bordures dont le style de bordure est "caché" ont la priorité sur toutes les autres bordures en conflit. Toute bordure ayant cette valeur supprime toutes les bordures à cet endroit.

Répondu el 28 de Juillet, 2010 par anthonyrisinger (1245 Points )

1 votes

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

Commenté el 31 de Décembre, 2011 par cjroth

Answer 4

45voto

jony Points 164

Exemple d'une très simple moyen 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>

Répondu el 7 de Décembre, 2011 par jony (164 Points )

13 votes

LA "MAGIE" EXPLIQUÉE : frame et rules sont OLD (pas HTML5) table (vous devriez plutôt utiliser les CSS). frame dit quelles parties de à l'extérieur de les bordures des tableaux doivent être visibles - void signifie cacher toutes les frontières extérieures... rules dit quelles parties de à l'intérieur de les bordures des tableaux doivent être visibles - all signifie tous... évidemment... S'il vous plaît, n'utilisez pas ceci, à moins que vous ne soyez un fanatique de HTML3 ... :)

Commenté el 14 de Janvier, 2016 par jave.web

1 votes

Ajouter quelque chose comme une bordure : 1px solid black permet de s'assurer que la limite extérieure du tableau est encadrée.

Commenté el 11 de Février, 2016 par Aaron Liu

1 votes

A fonctionné comme un charme en 2020 pour ajouter rapidement de la lisibilité à un tableau ridiculement espacé dans un site Web que je lisais. En fait, ceci était suffisant pour les bordures internes : rules="all".

Commenté el 20 de Février, 2020 par Edoardo Facchinelli

Answer 5

11voto

Crisboot Points 376

Pour des raisons de compatibilité avec ie7 et ie8, je vous suggère d'utiliser first-child et non last-child :

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

Répondu el 5 de Octobre, 2010 par Crisboot (376 Points )

0 votes

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

Commenté el 25 de Octobre, 2011 par Michael Biermann

Answer 6

4voto

Rufinus Points 8148

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 mets une bordure de table, elle est éliminée par le border-collapse.

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

Répondu el 10 de Août, 2009 par Rufinus (8148 Points )

1 votes

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

Commenté el 11 de Août, 2009 par Richard Knop

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: