Home/ Questions/Q 1074839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T21:11:24+00:00

I’m having trouble getting a td to have some text at its top and

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0