如何在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';