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