html5 - style - Mesa con solo lineas verticales visibles
html5 input title (2)
Explicando la respuesta de Simon para aquellos que desean líneas verticales dentro de una tabla pero no columnas diferentes. Nota: tienes que hacerlo exactamente como se especifica en su respuesta. La tabla en sí necesita colapso de borde: el colapso o varias líneas se mostrarán, tr necesita borde: no se mostrará ninguno o un esquema, y la parte td borde-izquierda / derecha / arriba / abajo es obvia.
<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>
Necesito una forma de mostrar solo las líneas verticales en una tabla.
He intentado agregar border-left y border-right, ambos con: 1px solid #red ;, tanto a la tabla como a los td separados. pero no agregará el color del borde.
Entonces, lo que busco es una forma fácil de crear estas líneas verticales.
Use border-collapse en su <table> que border-left y border-right en su <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>