如何在两个中间列之间绘制分隔线？

Question

我有一个包含4列的表格，类似于这样：

+------------+-----------+------------+-----------+
| first name   last name   first name   last name |
+------------+-----------+------------+-----------+

现在我想要这个：

+------------+-----------+------------+-----------+
| first name   last name | first name   last name |
+------------+-----------+------------+-----------+

这是我的代码：

<table>
    <tr>
        <td>first name</td>
        <td>last name</td>
        <td>first name</td>
        <td>last name</td>
    </tr>
</table>

如您所见，右侧的两列与左侧的两列完全相同。现在我想在它们之间画一条分割线，该怎么做？

- stack

Answer 1

您可以将目标锁定在第二个 td 元素上，并为其设置一个右边框。也可以通过第三个 td 元素的左边框来实现相同的效果。

td:nth-child(2) {
  border-right: 1px solid;
}
td {
  padding: 0 10px;
}
table {
  border: 1px solid;
}

<table>
  <tr>
    <td>first name</td>
    <td>last name</td>
    <td>first name</td>
    <td>last name</td>
  </tr>
</table>

- m4n0

---

是的，:nth-child 在旧浏览器上也可以使用。http://caniuse.com/#search=nth-child - m4n0

你能否看一下我的更新？我认为你可以给我一个解决方案（类似于当前的解决方案，只是水平方向上的）。 - stack

您介意回滚更新并将其发布为新问题吗？这是因为编辑与标题无关。最好将其作为新问题发布，以便其他用户受益，而您也不会被投票降低。 - m4n0

是的，你说得对，但我至少要等1个小时后才能提出新问题。不管怎样，好的，谢谢。 - stack