How to create a button in HTML with the same properties as the last row of the table?

Question

Consider I have a table in HTML:

<table>
<tr>
    <td>首页</td>
</tr>
<tr>
    <td>服务</td>
</tr>
<tr>
    <td>联系人</td>
</tr>

Now I just want to add a button at the end of this table, the width of this button must be the same as the width of the last row of the table (i.e. "Contacts") (indicated by its background color). Now, what do I do? When I create a button it only has the width it creates:

<button type="button" id='myBtn'>点击</button>

Now I need a JavaScript code that sets the width of the button myBtn element to the width of the "Contact" row?

Answer 1

Adding display: block and width: 100% to the button (using CSS or JS) will make it expand to fill the width of its column:

td {
  background: yellow;
  padding: 0;
}

button {
  background: cyan;
  width: 100%;
  border: 0;
  display: block;
}

<table>
  <tr>
      <td>Home</td>
  </tr>
  <tr>
      <td>Service</td>
  </tr>
  <tr>
      <td>Contacts</td>
  </tr>
  <tr>
      <td>
        <button type="button" id='myBtn'>Click</button>
    </td>
  </tr>
</table>

If you want to use JS, you can do this:

const button = document.getElementById('myBtn')

button.style.width = '100%';
button.style.display = 'block';