仅显示垂直线的表格答案

【问题标题】：Table with only vertical lines visible仅显示垂直线的表格
【发布时间】：2013-09-13 15:24:50
【问题描述】：

我需要一种方法来只显示表格中的垂直线。

我尝试在表格和单独的 td 中添加左边框和右边框，均使用 :1px solid #red;。但它不会添加边框颜色。

所以我正在寻找一种创建这些垂直线的简单方法。

【问题讨论】：

【解决方案1】：

在 <table> 上使用 border-collapse，而不是在 <td> 上使用 border-left 和 border-right。

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>

【讨论】：

如果你想把它和圆角的表格结合起来，你也可以使用 td:nth-child(odd){ border-right: 1px solid rgb(200, 200, 200);左边框：1px 纯色 rgb(200, 200, 200); } 代替。

【解决方案2】：

为那些想要在表格中使用垂直线而不是不同列的人解释 Simon 的答案。注意：您必须完全按照他的回答中的说明进行操作。表格本身需要border-collapse:collapse或者显示多行，tr需要border:none或者显示轮廓，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>

【讨论】：

对不起，这个代码格式化程序很烂。我试图在防止滚动条的同时保持一切整洁。