如何在HTML表格末尾创建与最后一行宽度相同的按钮？

不需要非得依赖JavaScript，用CSS就能简单实现，甚至比JS更稳定可靠：

方法一：容器包裹实现自适应宽度 #

把表格和按钮放到同一个容器中，设置容器为inline-block（让容器宽度由表格内容自动决定），再给按钮设置width: 100%，按钮就会自动填满容器宽度，和表格保持完全一致：

<div style="display: inline-block;">
  <table>
    <tr>
        <td>Home</td>
    </tr>
    <tr>
        <td>Service</td>
    </tr>
    <tr>
        <td>Contacts</td>
    </tr>
  </table>
  <button type="button" id='myBtn' style="width: 100%; box-sizing: border-box;">Click</button>
</div>

添加box-sizing: border-box是为了避免按钮的内边距、边框额外增加宽度，导致超出容器范围。

方法二：固定宽度直接匹配 #

如果表格的宽度是固定值（比如width: 220px），直接给按钮设置相同的宽度即可：

<table style="width: 220px;">
  <!-- 表格内容 -->
</table>
<button type="button" id='myBtn' style="width: 220px; box-sizing: border-box;">Click</button>

特殊场景下的JavaScript方案 #

如果表格宽度是动态变化的（比如内容长度改变、窗口缩放导致宽度变化），可以用JS获取表格最后一行的宽度，再赋值给按钮：

// 确保页面加载完成后执行
window.addEventListener('load', () => {
  const lastRowTd = document.querySelector('table tr:last-child td');
  const btn = document.getElementById('myBtn');
  btn.style.width = lastRowTd.offsetWidth + 'px';
  btn.style.boxSizing = 'border-box';
  
  // 可选：监听窗口大小变化，实时更新宽度
  window.addEventListener('resize', () => {
    btn.style.width = lastRowTd.offsetWidth + 'px';
  });
});

这种方式需要处理页面加载、内容更新、窗口缩放等多种场景，相对CSS方案更繁琐。

内容的提问来源于stack exchange，提问作者M.Riyan