CODEWITHSUNDEEP
htmlcsshtml-table
Uncommon
Uncommon

Reputation: 3383

Make one column of cells determine row height

I have a table with two columns, and I want the height of each row to be determined by the height of the content in the right column, so that cells in the left column will tend to get cut off vertically.

Can I do this in CSS? I've tried setting max-height=100% on the left td, as well as using a div inside the left td and setting max-height=100% on that instead. But the rows still get sized to fit whichever cell is biggest, rather than ignoring the size of the left one.

Upvotes: 0

Views: 236

Answers (1)

Stickers
Stickers

Reputation: 78676

You can set the div to position:absolute with overflow:hidden etc, and set some width on the td to prevent it from collapsing with the only absolute div inside.

table {
  width: 200px;
}
td {
  width: 50%;
}
td:first-child {
  position: relative;
}
td:first-child  > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
<table border="1">
  <tr>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </td>
    <td>Lorem ipsum</td>
  </tr>
</table>

Upvotes: 1

Related Questions