Question 43535 in Html Question posted in
Some basic documentation can be found here.

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

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

The issue looks like this:

html table with buttons

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%;
}
Tags:

2

Answers


  1. 0

    Button parent element <td> default height: 100%, so set <td> height manually.

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

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

button {
  background-color: skyblue;
  width: 100%;
  height: 100%;
}
    <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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search