Html 只有垂直线可见的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18789947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table with only vertical lines visible
提问by Michael Tot Korsgaard
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.
我试图添加边框左和边框右，两者都带有 :1px solid #red;，到表格和单独的 td 中。但它不会添加边框颜色。
So what I'm looking for is an easy way to create these vertical lines.
所以我正在寻找一种简单的方法来创建这些垂直线。
回答by Simon Arnold
Use border-collapseon your <table>than border-leftand border-righton your <td>.
使用边界崩溃您<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>回答by Andrew
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.
为那些想要在表格中使用垂直线而不是不同列的人解释西蒙的答案。注意：您必须完全按照他的回答中的说明进行操作。table本身需要border-collapse:collapse或者多行会显示，tr需要border:none或者outline会显示，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>