HTML table: merged cells: wrong height on FF and IE (ok Chrome)
I need to display an HTML with various cells merged across rows.
Here's a test that illustrates the requirement and issue:-
<html>
<head></head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
<td rowspan="1" style="height: 20px">
<div style="width: 100px;">RS=1</div>
</td>
<td rowspan="3" style="height: 60px">
<div style="width: 100px;">RS=3</div>
</td>
</tr>
<tr>
<td rowspan="4" style="height: 80px">
<div style="width: 100px;">RS=4</div>
</td>
</tr>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
</tr>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
</tr>
<tr>
<td rowspan="1" style="height: 20px">
<div style="width: 100px;">RS=1</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
When displayed in Chrome it is OK, but in FF3.6 and IE8 it is not (look at the two "RS=2" in column one, they have the same rowspan and height but are visibly different). Row heights are incredibly important to me as I display another table next to this with single rows of fixed height that needs to align with this table).
开发者_如何学编程Can anybody please advise how this can be corrected in Firefox and IE?
Here's a fix that works in Firefox but not Internet Explorer. Remove the height attribute from the cells, then either add
style="height:20px;"
to all rows OR
add this style tag inside the head:
<style>
tr{height:20px;}
</style>
This works in Firefox and Chrome is unaffected, but IE still makes a mess. Firefox and IE both have a history of bugs when rendering tables. discussion of table cell height rendering bug in Firefox
Some newest "intelligent" browser dectect eventual "not closed tag" errors and show it as your tree is well done, but it is not always like this.
Check all opened tags are closed, there must be a non-closed one. If you use Dreamweaver you can colapse/expand tags by the menu on the left. ->...<- or <-...->
Without a proper doctype, you are in quirks mode and IE, in particular, will never attempt to perform like all the other far more modern browsers. Not that is does a good job of it in any case.
加载中,请稍侯......
精彩评论