Can I force a tr not to collapse?

Supposed I have code like:

<table>
    <tr style="background-color: red"><td><pre>This is line one</pre></td></tr>
    <tr style="bac开发者_StackOverflow中文版kground-color: red"><td><pre></pre></td></tr>
    <tr style="background-color: red"><td><pre>This is line three</pre></td></tr>
    <tr style="background-color: red"><td><pre>This is line four</pre></td></tr>
</table>

What I would like is for the second line to be the same height as the other lines. Is there a way to do this?

Set a style on it.

tr{
   height: 20px;
}

If you want to use javascript (jQuery) then something like this.

var maxHeight =0;
$("tr").each(function(){
    if($(this).height()>maxHeight){
       maxHeight = $(this).height();
    } 
});

$("tr").css({height: maxHeight+'px'});

Here is a jsFiddle: http://jsfiddle.net/Xtyqr/

HTML solution :

Change

<tr style="background-color: red"><td></td></tr>

to

<tr style="background-color: red"><td>&nbsp;</td></tr>

But you should really use CSS classes to set the style of your rows instead of using the "style" attribute.

rcravens is right.

If you prefer, you can also set that height directly in the HTML:

<table>
<tr style="background-color: red" height = 20><td>This is line one</td></tr>
<tr style="background-color: red" height = 20><td></td></tr>
<tr style="background-color: red" height = 20><td>This is line three</td></tr>
<tr style="background-color: red" height = 20><td>This is line four</td></tr>
</table>

Works in Firefox 4 Beta 10