IE css - last table row to expand to fill remaining height
Given HTML like the following, how can I get the last row to take up the remaining height, and have the n-1 first rows to take up just as much height as they need?
This seems to work as is in Chrome, but not in Firefox2 or IE6/7/8.
<table>
<tr>
<td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td/>
</tr>
<tr>
<td>one</td>开发者_开发百科
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>full</td>
</tr>
</table>
So, the idea is that the last row, with "full" in it, should be really tall, and the other rows, "one", "two" and "three" should be as small as possible.
I've tried stuff like putting exact heights on the rows, say "<tr style="height:20px;"> and I've tried 100% height on the last row, no luck so far!
Update:
This layout is going to be used for varying types of content, and the intention is for the table to size itself to the content. Sometimes the div will be tall, then its height determines the table's height, but othertimes the div is short, then the rows (one, two, three) determine the table's height.
If javascript is ok, you could use jQuery and find the top position of the last row and the position of the bottom of the window or element. The difference should be set as the height of the last row.
I didn't do any code yet, because I wasn't sure if you were looking for a table inside of an object or to have it fill to the bottom of the window. I can do that for you if you'd like with some more detail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<table border=1>
<tr>
<td rowspan="2"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td valign=top style="padding:0px;">
<table height=1>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td valign=top>full<br><br><br>more full</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
Updatedx3, works in ie6/ff
加载中,请稍侯......
精彩评论