web-dev-qa-db-fra.com

Table avec uniquement des lignes verticales visibles

J'ai besoin d'un moyen de n'afficher que les lignes verticales d'un tableau.

J'ai essayé d'ajouter border-left et border-right, les deux avec: 1px solid #red ;, à la fois au tableau et aux td séparés. mais cela n'ajoutera pas la couleur de la bordure.

Donc ce que je recherche, c'est un moyen facile de créer ces lignes verticales.

html5css3css-tables
18
Michael Tot Korsgaard

Utilisez border-collapse sur votre <table> que bordure-gauche et bordure-droite sur votre <td>.

table { border-collapse: collapse; }
tr { border: none; }
td {
  border-right: solid 1px #f00; 
  border-left: solid 1px #f00;
}
<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>
35
Simon Arnold

Expliquer la réponse de Simon pour ceux qui veulent des lignes verticales dans un tableau mais pas des colonnes différentes. Remarque: vous devez le faire exactement comme spécifié dans sa réponse. Le tableau lui-même a besoin de border-collapse: repli ou plusieurs lignes s'afficheront, le tr a besoin de border: aucun ou un contour s'affichera, et la partie td border-left/right/top/bottom est évidente.

<html>
<head><style>
table {
        border-collapse:collapse;
}
tr {
        border:none;
}
th, td {
        border-collapse:collapse;
        border: 1px solid black;
        padding-top:0;
        padding-bottom:0;
}
.verticalSplit {
        border-top:none;
        border-bottom:none;
}
.verticalSplit:first-of-type {
        border-left:none;
}
.verticalSplit:last-of-type {
        border-right:none;
}
</style></head>
<body><table>
<tr><td>
        <table><tr>
                <td class="verticalSplit">A</td>
                <td class="verticalSplit">B</td>
        </tr></table></td>
<td>C</td></tr>
<tr><td>D</td><td>E</td></tr>
</table></body>
</html>
3
Andrew