如何将HTML表格列内的SVG圆形设置为左对齐？

出现对齐异常的核心原因有3个：

• td设置的column-width: 3px远小于svg元素的50px宽度，导致单元格内容溢出、布局计算错乱
• HTML代码存在冗余的</td>闭合标签，触发浏览器异常渲染
• 未给表格指定固定布局规则，浏览器会根据内容自动分配列宽，导致td的对齐属性不生效

修复步骤 #

• 删除HTML代码中多余的</td>标签，先修复语法错误
• 移除td样式里错误的column-width: 3px属性，避免内容被强制压缩
• 给table添加table-layout: fixed属性，固定表格布局规则，禁止浏览器自动调整列宽
• 保留td的text-align: left属性即可实现内容左对齐，右侧自动留白

完整修改后代码 #

table {
  table-layout: fixed;
  width: 100%; /* 可按需调整表格总宽度 */
}
td {
  border: 1px solid red;
  padding-top: 30px;
  text-align: left;
  /* 可以按需设置td的最小宽度，比如min-width: 60px */
}
svg {
  border: 1px solid blue;
}

<table>
  <tr>
    <td>
      <svg width='50' height='50'>
        <circle cx='2' cy='2' r='2' fill='#ff8B45'/>
        <title>date</title>
      </svg>
    </td>
    <!-- 新增更多td放圆形，都会自动左对齐 -->
    <!-- <td>
      <svg width='50' height='50'>
        <circle cx='2' cy='2' r='2' fill='#ff8B45'/>
        <title>date</title>
      </svg>
    </td> -->
  </tr>
</table>

如果需要调整圆形在svg内部的位置，修改circle的cx属性即可：cx=2是svg最左侧，cx=25是svg居中，cx=48是svg最右侧，可按需调整。

内容的提问来源于stack exchange，提问作者bloodmage