Вопросы Теги

Have Elements at both top and bottom of

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 into 2 rows and using rowspan="2" on the other , 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.

6
задан Brian Tompsett - 汤莱恩 10 June 2017 в 19:34
поделиться