如何让按钮高度填满父级td，即使文本换行导致td增高？

你遇到的问题是表格里的按钮无法填充td的全部高度，尤其是当同行td因文本换行导致高度增加时。这是因为表格单元格的高度计算逻辑和普通div不同，直接设置height:100%不会让子元素继承动态计算的高度。

有效解决方案 #

这里提供两种可靠的解决方法：

方法一：利用Flex布局拉伸按钮

给包含按钮的td设置display: flex，然后让按钮占据所有可用空间：

table, tr, td {
  border: 1px solid black;
  padding: 5px;
  border-collapse: collapse;
}

td {
  width: 70px;
  padding: 0;
}

/* 定位到带按钮的td，开启flex布局 */
td:has(button) {
  display: flex;
}

button {
  background-color: skyblue;
  width: 100%;
  flex: 1; /* 让按钮拉伸填充整个td高度 */
  border: none; /* 可选：移除按钮默认边框，避免出现间隙 */
}

如果需要兼容不支持:has()选择器的浏览器，给带按钮的td加个类名（比如button-cell），然后把td:has(button)换成.button-cell即可。

方法二：绝对定位强制填充

通过绝对定位让按钮铺满td的整个区域：

table, tr, td {
  border: 1px solid black;
  padding: 5px;
  border-collapse: collapse;
}

td {
  width: 70px;
  padding: 0;
  position: relative; /* 给按钮的绝对定位做参考 */
}

button {
  background-color: skyblue;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: none;
}

完整代码示例 #

HTML

<div>
  <table>
    <tr>
      <td>word word word</td>
      <td>
        <button>x</button>
      </td>
    </tr>
    <tr>
      <td>word</td>
      <td>
        <button>x</button>
      </td>
    </tr>
  </table>
</div>

内容的提问来源于stack exchange，提问作者Joshua S