如何将多列的内容与最后一列对齐？

Question

我有一个包含数据的表格。

我希望我的按钮与最后一列对齐，但我只是不知道如何对齐。我尝试过

text-align: right

但这只是将元素移动到最右侧。我希望它与第 4 列中的文本对齐。 你能帮我吗？ html-table 是正确的方法还是应该使用网格，即使我的数据遵循表格样式？

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td>Row 1, Col 2</td>
      <td>Row 1, Col 3</td>
      <td>Row 1, Col 4</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 3</td>
      <td>Row 2, Col 4</td>
    </tr>
    <tr>
      <td colspan="4"><button>hello</button></td>
    </tr>
  </tbody>
</table>

Answer 1

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      .
      .
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      .
      .
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      .
      .
    </tr>
    <tr>
      <td colspan="3"></td>
      <td style="text-align: left"><button>hello</button></td>
    </tr>
  </tbody>
</table>

colspan="3" 用于最后一行中的空单元格，以使按钮与第四列中的文本对齐。另外，text-align: left;应用于包含按钮以保持该列内的对齐。