100% height doesn't work in td when other td's in the same row are taller?

Question

My goal is to style a button (or icon/image/etc.) in a table cell so that it fills the entire cell edge to edge.

I've created the following minimal example showing 3 rows. The first td in each row is colored Red, Green, or Blue for clarity and contains a div set to 100% width and height and a black background. The second td contains some content (could be anything) and has various height-related styles applied.

<table style="color:white">
  <tbody>
    <tr>
      <td style="padding: 0; background:red">
        <div style="height:100%; width:100%; background:black;">T1</div>
      </td>
      <td style="padding: 0; background:black;">padding:0</td>
    </tr>
    <tr>
      <td style="padding: 0; background:green;">
        <div style="height:100%; width:100%; background:black;">T2</div>
      </td>
      <td style="padding:10px; background:black;">padding:10px</td>
    </tr>
    <tr>
      <td style="padding: 0; background:blue;">
        <div style="height:100%; width:100%; background:black;">T3</div>
      </td>
      <td style="height:100px; background:black;">height:100px</td>
    </tr>
  </tbody>
</table>

You can see that because of the second td's height, the first td in the second and third rows are being resized without resizing their content. And the first row, with the 0px padding on the second cell, is working as intended with regards to the first cell, but requiring other cells to not be taller than my button is extremely limiting.

What is the correct way to implement this sort of cell-filling behavior? Preferably no-JS.