如何在HTML中创建一个与表格最后一行具有相同属性的按钮？

Question

考虑我在HTML中有一个表格：

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

现在我只想在这个表格的末尾添加一个按钮，这个按钮的宽度必须与表格的最后一行（即“联系人”）的宽度相同（由其背景颜色表示）。现在，我该怎么做呢？当我创建一个按钮时，它只有自己创建的宽度：

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

现在我需要一个JavaScript代码，将按钮myBtn元素的宽度设置为“联系人”行的宽度吗？

Answer 1

将 display: block 和 width: 100% 添加到按钮（使用CSS或JS）将使其扩展以填充其列的宽度：

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>

如果您想使用JS实现，可以这样做：

const button = document.getElementById('myBtn')

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