26

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

我尝试将左边框和右边框添加到表格和单独的 td 中，两者都带有 :1px solid #red;。但它不会添加边框颜色。

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

4

2 回答 2

53

在你的上使用border - collapse ，而<table>不是在你的.<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>

于 2013-09-13T15:35:52.007 回答
3

为那些想要在表格中使用垂直线而不是不同列的人解释西蒙的答案。注意：您必须完全按照他的回答中指定的方式进行操作。表格本身需要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>

于 2017-04-06T18:11:52.483 回答