Могу ли я заставить tr не рухнуть?

Question

Предположим, у меня есть такой код:

<code>
<table>
    <tr style="background-color: red"><td><pre>This is line one

This is line three

This is line four

Я хотел бы, чтобы вторая строка была такой же высоты, как и другие строки. Есть ли способ сделать это?

Answer 1

Установите стиль для него.

tr{
   height: 20px;
}

Если вы хотите использовать javascript (jQuery), то что-то вроде этого.

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

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

Вот jsFiddle: http://jsfiddle.net/Xtyqr/

Answer 2

Правильно.

Если вы предпочитаете, вы также можете установить эту высоту непосредственно в 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>

Работает в Firefox 4 Beta 10

Answer 3

HTML решение:

Изменение

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

до

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

Но вы должны действительно использовать CSS-классы для установки стиля ваших строк вместо использования атрибута "style".