How to fix height of TR with CSS?

Spread the love

Sometimes, we want to fix height of TR with CSS.

In this article, we’ll look at how to fix height of TR with CSS.

How to fix height of TR with CSS?

To fix height of TR with CSS, we set the elements inside the cells to the height we want.

For instance, we write

<table>
  <tr>
    <td class="container">
      <div>
        This is a long line of text designed not to wrap when the container
        becomes too small.
      </div>
    </td>
  </tr>
</table>

to add a table.

Then we write

td.container > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

td.container {
  height: 20px;
}

to set the height of the td to 20% and set the div inside the td to fill the height of the trd with height: 100%;.

Conclusion

To fix height of TR with CSS, we set the elements inside the cells to the height we want.

Leave a Reply

Your email address will not be published. Required fields are marked *