2

I am trying to make all the rows of a table the same height as the one that has the longest text in it, expanding accordingly.

But all I achieved is give them a fixed height after reading this: How can I force all rows in a table to have the same height

This means that I need to predict how much text I should put in it which is obviously not predictable. Is it possible with CSS or do I need using Javascript?

Community
  • 1
  • 1
Newbrigand
  • 33
  • 7
  • 2
    You would definitely need to use JavaScript to implement conditional behaviour. – David Thomas May 22 '12 at 11:58
  • Thanks David so I need to dynamically calculate the height of the rows that has expanded most and give that height to the other rows. I will try and post the result. (sorry for my english) – Newbrigand May 22 '12 at 12:02
  • Yeah, pretty much. Here's a [JS Fiddle demo](http://jsfiddle.net/DqrPB/), which doesn't merit posting as an answer since it's essentially the same as that provided by [Samuel](http://stackoverflow.com/a/10701655/82548), below. – David Thomas May 22 '12 at 12:10

1 Answers1

2

It's not possible with pure CSS.

It's possible to do it with javascript. For example, with jQuery you could write something like

var maxHeight = null;
$(<MY LINES>).each(function() {
    var thisHeight = $(this).height();
    if(maxHeight == null || thisHeight > maxHeight) maxHeight = thisHeight;
}).height(maxHeight);

Don't forget to handle borderline cases and to include a maximum and a minimum height to your lines.

Samuel Rossille
  • 18,940
  • 18
  • 62
  • 90