How to align the content of a multi-column to the last column?

Question

I have a table with data.

I want my button to align with the last column, but I just don't get how. I tried text-align: right but this just moves the element to the far right. I want it to align with the text in column 4. Can you help me out? Is html-table the correct approach or should I use a grid even though my data follows a tabular style?

<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>

The colspan="3" is used for an empty cell in the last row to align the button with the text in the fourth column. Additionally, text-align: left; is applied to the containing the button to maintain alignment within that column.