如何在表格中用垂直线连接圆圈？

<style>
    .circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #000;
        margin: 0 auto;
    }
</style>

<table>
    <tr>
        <td>
            <div class="circle"></div>
        </td>
        <td style="border-left: 1px solid #000;"></td>
        <td>
            <div class="circle"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="circle"></div>
        </td>
        <td style="border-left: 1px solid #000;"></td>
        <td>
            <div class="circle"></div>
        </td>
    </tr>
</table>