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>

因此，如您所见，右侧的两列完全相同，左侧有两列。现在我想在它们之间画一个分隔线，怎么样？

Answer 1

您可以定位第二个td元素并为其设置右边框。它也可以使用第三个td元素的左边界来实现。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: