Geek Answers Handbook

Elements both above and below <td>

I'm having trouble getting td in order to have the text at the top and the image button at the bottom. Here is a code similar to 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 breaking the first <td>into 2 lines and using rowspan="2"on the other <td>, but I would like to avoid this, because it is not intuitive, and I consider this a hack. In addition, I only need to support the latest versions of FF and Chrome. Any ideas?

P / S: I deal with tabular data here, so please, "you should not use tables!" kind of advice.

UPDATE: added requirements for DocType and browser.

+5
source share
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>
+4

, , .

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

You should be able to use CSS positioning. Try this, but of course use a CSS stylesheet :-)

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

Please note that you need to place divinside td, because the position attribute does not work intd

0
source

More articles:


All Articles