html - 如何将表格列中的圆圈向左对齐？

Question

我是 html 的新手，并试图创建一个以圆圈表示的事件表。我使用此代码创建每个圆圈：

td {
  border: 1px solid red;
}

svg {
  border: 1px solid blue;
}

<table>
  <tr>
    <td style='column-width: 3px;padding-top: 30px;text-align: left;'>
      <svg width='50' height='50'>
        <circle cx='2' cy='2' r='2' fill='#ff8B45'/>
        <title>date</title>
        </svg>
    </td>
    </td>
  </tr>
</table>

我的问题是我找不到将它们对齐到左侧的方法，它们从桌子的右侧开始，并且圆圈越多越向右...我希望它从左侧开始，留下空间正确的。谁能告诉我如何做到这一点？

标签： htmlhtml-tablealignment