Menu
I'm having trouble getting a td to have some text at its top and an image button on its bottom. Here is code similar what I have now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<table border="1">
<tr>
<td valign="top" style="padding:0; height:100%">
Some text
<form style="vertical-align: bottom;">
<input type="submit" value="should be at bottom of td"/>
</form>
</td>
<td>
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
</td>
</tr>
</table>
</body>
</html>
Technically I can achieve what I want by splitting the first <td> into 2 rows and using rowspan="2" on the other <td>, but I would like to avoid that since it is un-intuitive and I consider it a hack. Also, I only need to support the lastest versions of FF and Chrome. Any ideas?
P/S: I am dealing with tabular data here so please no "you shouldn't be using tables!" kind of advice.
UPDATE: Added DocType and browser support requirements.
583
Finally found out how to do it. The key was to set the height of the <table> to 100%. I also removed the <p> around the top-aligned text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table border="1" style="height: 100%;">
<tr>
<td style="height:100%;">
<div style="position:relative;height:100%; margin:0; padding:0;">
Some text
<form style="position:absolute;bottom:0px; margin:0; padding:0;">...</form>
</div>
</td>
<td>
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
This <br />
</td>
</tr>
</table>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With