How To Make All The Rows Of A Table The Same Height As The Biggest One

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

Solution 1:

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.