Stretch button height to fill parent td, even when text wrap occurs in tr, increasing td height

Take a look at the codepin: https://codepen.io/josh5555s/pen/zYJyWbR

The issue looks like this:

I want the buttons to be 100% of td height even if the text wrap has increased the td height, as seen in the first row of the above example.

I have looked through many Stack Overflow posts on similar topics, but nothing has worked for this specific situation.

I’ve tried setting both parent and child elements to height: 100%

I’ve also tried setting the parent td to display: flex; flex-direction: column; and the child button to align-items: stretch;

I am wondering if something about the td element doesn’t follow the same rules as the div, which most Stack Overflow examples are using.

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>

css:

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

td {
  width: 70px;
  padding: 0px;
  height: 100%;
}

button {
  background-color: skyblue;
  width: 100%;
  height: 100%;
}

>Solution :

You might use absolute positioning to stretch the buttons.

Hope you’re using table to display tabular data, otherwise you’d be better with grid or flex.

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

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

button {
  position: absolute; top:0; left:0;
  background-color: skyblue;
  width: 100%;
  height: 100%;
}

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