Table with only vertical lines visible

问题

I need a way to show only the vertical lines in a table.

I've tried to add border-left and border-right, both with :1px solid #red;, to both the table and the separate td's. but it won't add the border color.

So what I'm looking for is an easy way to create these vertical lines.

回答1:

Use border-collapse on your <table> than border-left and border-right on your <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:

Expounding upon Simon's answer for those who want vertical lines within a table but not different columns. Note: you have to do it exactly as specified in his answer. The table itself needs border-collapse:collapse or multiple lines will show, the tr needs border:none or an outline will show, and the td border-left/right/top/bottom part is obvious.

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

来源：https://stackoverflow.com/questions/18789947/table-with-only-vertical-lines-visible

标签

html

css

css-tables