代码之家 › 专栏 › 技术社区 › Suan

在<td>

cell html-table css html

5

Suan · 技术社区 · 14 年前

我很难让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> rowspan="2" <

在这里处理表格数据,所以请不要“你不应该使用表格!”一种建议。

更新:增加了DocType和浏览器支持要求。

3 回复 | 直到 8 年前

1

4

Suan 14 年前

终于知道怎么做了。关键是要设置高度 <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>

2

Matt 14 年前

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

3

0

Hoque MD Zahidul 14 年前

你应该能够使用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>

请注意,您需要放置 div td 因为position属性在