Q:

How to draw a separator-line between two middle columns?

I have a table containing 4 columns, something like this:
+------------+-----------+------------+-----------+
| first name   last name   first name   last name |
+------------+-----------+------------+-----------+

Now I want this:
+------------+-----------+------------+-----------+
| first name   last name | first name   last name |
+------------+-----------+------------+-----------+

Here is my code:
<table>
    <tr>
        <td>first name</td>
        <td>last name</td>
        <td>first name</td>
        <td>last name</td>
    </tr>
</table>

So, as you see, two columns on the right are exactly the same with two columns on the left. Now I want to draw a separator-line between them, how?

A:

You can target the second td element and set a right border for it. It can also be achieved using left border of third td element.

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>

