Question

假设我的代码如下：


<table>
    <tr style="background-color: red"><td><pre>This is line one</pre></td></tr>
    <tr style="background-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>

我想要的是第二行与其他行的高度相同。有没有办法做到这一点？

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解决方案：

更改

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

到

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

但是你应该使用CSS类来设置行的样式而不是使用“style”属性。

Answer 3

rcravens是对的。

如果您愿意，还可以直接在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

我可以强迫tr不要崩溃吗？

3 个答案: