在<td>的顶部和底部都有元素

Question

在<td>的顶部和底部都有元素

我无法让td顶部有一些文字,底部有一个图像按钮.这是与我现在类似的代码:

<!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>

Run Code Online (Sandbox Code Playgroud)

从技术上讲,我可以通过将第一<td>行分成两行并使用rowspan="2"另一行来实现我想要的<td>,但我想避免这种情况,因为它不直观,我认为它是一个黑客.此外,我只需要支持最新版本的FF和Chrome.有任何想法吗？

P/S:我在这里处理表格数据所以请不要"你不应该使用表格!" 一些建议.

更新:添加了DocType和浏览器支持要求.

Answer 1

Sua*_*uan 4

终于知道怎么做了。关键是将高度设置<table>为 100%。我还删除了<p>顶部对齐文本周围的内容。

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，2 月前
查看次数：	8069 次
最近记录：	8 年，5 月前