Table TD Height in IE
Question
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<table style = "width : 500px; height : 100%; border : 1px solid black;">
<tr>
<td style = "width : 300px; height : 100%; border : 1px solid;">
1st TD
</td>
<td rowspan = 2 style = "border : 1px solid;">
</td>
<td rowspan = 2 style = "border : 1px solid;">
Sidebar
<br />
<br />
Sidebar
</td>
</tr>
<tr>
<td style = "width : 300px; border : 1px solid;">
Last TD
</td>
</tr>
</table>
I want that 1st TD should expand as I write text into it and the remaining space should be occupied by last TD.
This code works perfectly in Firefox but not in IE. IE equally divides 1st and Last TD across the rowspanned TDs.
You can yourself see the code in FF and IE and I want FF like look.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<table style = "width : 500px; border : 1px solid black;">
<tr>
<td style = "height : 100%; border : 1px solid;">
1st TD
</td>
<td rowspan = 2 style = "border : 1px solid;">
</td>
<td rowspan = 2 style = "border : 1px solid; height : 100%; vertical-align : top;">
Sidebar
<br />
<br />
<br />
Sidebar
<br />
fdkdf
<br />
dfkdf
fdkdf
<br />
dfkdffdkdf
<br />
dfkdf
fdkdf
<br />
dfkdf
</td>
</tr>
<tr >
<td style = " border : 1px solid;">
Last TD
</td>
</tr>
</table>
Please check my this code in FF and IE and see the difference of 1st and Last TD.
1 answers
solution1
0 2012-03-03 05:25:04
@Shivom IE always render the tables code differently and IE7 and IE8 is different. So for your problem here is the code you can check it it will not give any error/problem in your requiremt and full browser compatible.
<table border="1" cellspacing="0" cellpadding="0" width="500">
<tr>
<td valign="top"><table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>1st TD</td>
</tr>
<tr>
<td>Last TD<br/>Last TD<br/>Last TD<br/>Last TD<br/>Last TD<br/>Last TD<br/>Last TD<br/></td>
</tr>
</table></td>
<td> </td>
<td>
Sidebar
<br />
<br />
<br />
Sidebar
<br />
fdkdf
<br />
dfkdf
fdkdf
<br />
dfkdffdkdf
<br />
dfkdf
fdkdf
<br />
dfkdf
</td>
</tr>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.