Стол с видимыми вертикальными линиями

Мне нужен способ показать только вертикальные строки в таблице.

Я попытался добавить border-left и border-right, как с 1px solid #red;, так и с таблицей и отдельными td. но он не будет добавлять цвет границы.

Так что я ищу, это простой способ создания этих вертикальных линий.

Ответ 1

Используйте border-collapse на <table>, чем border-left и border-right на вашем <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>

Ответ 2

Исходя из ответа Саймона тем, кто хочет вертикальные линии внутри таблицы, но не разные столбцы. Примечание: вы должны сделать это точно так, как указано в его ответе. Сама таблица нуждается в крахе: коллапс или несколько строк будут отображаться, tr нуждается в границе: ни один, ни контур покажет, а td border-left/right/top/bottom часть очевидна.

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