Limit height of <td> element even if text in same table is longer [closed]

StackOverflow https://stackoverflow.com/questions/10869350

  •  12-06-2021
  •  | 
  •  

Question

So this is what I have. http://www.welivetech.net/showthread.php?tid=62&pid=131#pid131

As you can see from most of the posts in the thread (the first three), the postbit (blue box with avatar inside) looks fine.

However, the fourth postbit is elongated vertically because of the longer post content.

How would one go about keeping the postbit size the same even if there is a massive amount of text? Trust me, I've tried EVERYTHING for about 2 hours now...

Was it helpful?

Solution

You needs to use DIV inside you avatar TD, and this DIV must be styled as your current blue TD. TD will play the role of transparent container

Let's explain. Now you have:

<tr>
  <td class="avatar"><!-- Avatar block here --></td>
  <td>Post text</td>
</tr>

You needs:

<tr>
  <td class="container">
    <div class="Avatar><!-- Avatar block here --></td>
  </td>
  <td>Post text</td>
</tr>

OTHER TIPS

Have you tried overflow: scroll? Like:

.some_css_class {
  height: 100px; 
  overflow: scroll;
}

In my example, if the content is higher than 100px, it will keep the height and make the element scrollable.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top