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

【问题标题】：Have Elements at both top and bottom of <td>在 <td> 的顶部和底部都有元素
【发布时间】：2011-04-11 18:02:09
【问题描述】：

我无法让 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>

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

P/S：我 am 在这里处理表格数据，所以请不要“你不应该使用表格！”一种建议。

更新：添加了 DocType 和浏览器支持要求。

【问题讨论】：

标签： html css html-table cell

【解决方案1】：

不确定这是否是最好的方法，但这应该可行。

<html>  
<head></head>  
<body>  
<table border="1">  
  <tr>  
    <td style="padding:0;height:100%;">  
      <table style="height:100%;">
        <tr>
            <td style="vertical-align:top;">        
                <p style="vertical-align: top;">Some text</p> 
            </td>
        </tr>
        <tr>
            <td style="vertical-align:bottom;">
                <form>  
                  <input type="submit" value="should be at bottom of td"/>  
                </form> 
            </td>
        </tr>
      </table> 
    </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 />  
      This <br />   
    </td>  
  </tr>  
</table>  
</body>  
</html>

【讨论】：

谢谢马特，但是当有多个行时，第二个<td> 的高度不同。
不幸的是，这在 Chrome 中也中断了，即使我在 <tr>s 上设置了高度

【解决方案2】：

您应该能够使用 CSS 定位。试试这个，但当然要使用 CSS 样式表 :-)

<td style="height:100%">
   <div style="position:relative;height:100%;">
      <p>Some text</p>
      <form style="position:absolute;bottom:0;">...</form>
   </div>
</td>

请注意，您需要在td 内放置一个div，因为位置属性在td 内不起作用

【讨论】：

您的解决方案有效并且是一个很好的解决方案。但是，它不适用于我的团队正在使用的 DOCTYPE：XHTML 1.0 Transitional。我什至验证了页面，但发生的情况是<div> 永远不会拉伸以适应<td> 的高度，因此所有内容都保持在垂直中间。有什么想法可以在 XHTML 中完成这项工作吗？
另一个更新：原来 XHTML Doctype 不是确切的问题。问题是这个解决方案只适用于 no Doctype（即 Quirksmode）。和以前一样，希望在我进一步调查时有人有其他想法 - 我不想认为这无法完成！
尝试将 100% 的高度添加到 tr？
哇，我怎么没想到呢？不过，不幸的是，它只适用于 Firefox 而不是 Chrome...

【解决方案3】：

终于知道怎么弄了。关键是将<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>

【讨论】：

谢谢！我只需要将表格上的样式属性更改为“min-height:1px;”让它在 IE8+ 中工作