0

I have a table cell in which I would like some content to display at the top of the cell and other content at the bottom.

I am trying to use a div within the cell to accomplish this but it is not working.

Using CSS for this limited task would be fine too, however, redoing the whole page in css is not an option as the whole site is laid out in tables.

Here jsfiddle illustrating problem:

JSFiddle

Here is code *same as in jsfiddle:

<table border="1">
    <tr>
        <td rowspan="2" valign="top">cell 1<div style="align-vertical: bottom">
            want at bottom</div>
        </td>
        <td>cell 2<br>
        <br>
        <br>
        </td>
    </tr>
    <tr>
        <td>cell 3</td>
    </tr>
</table>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1260310
  • 2,229
  • 9
  • 49
  • 67

1 Answers1

2

Using a answer from this, you can learn how to position divs at the bottom of the containing element.

Your fiddle would look something like this:

<table border=1><tr><td rowspan=2 style="position:relative" valign="top">cell 1<div style="position:absolute; bottom:0">bottom</div></td><td>cell 2<br><br><br></td></tr><tr><td>cell 3</td></tr></table>

Keep in mind that you would probably need to style the div that you float downwards to make it look nice, but this solution would suit your stated needs.

Hope this helps!

Community
  • 1
  • 1
Logard
  • 1,494
  • 1
  • 13
  • 27
  • 1
    But then the width of the cell would no longer be affected by the `div`, causing a mess: http://jsfiddle.net/SRtXD/5/ – James Montagne Sep 07 '12 at 20:38
  • That is one weakness with this solution, yes. Not a perfect solution by any means, I agree, but working with tables you mostly want them not to change size based on content. That is one of the main reasons why you would choose a table for your layout instead of something more flexible. – Logard Sep 07 '12 at 20:43
  • The word "bottom" does not show up in my viewing of the fiddle. Are you seeing it? – user1260310 Sep 07 '12 at 20:45
  • Its there for me in chrome using your jsfiddle setup. But before trying out this solution bear in mind James Montagnes comment about size. You will have to stick with one size for all the cells you use this with and handle overflow from the inner divs. – Logard Sep 07 '12 at 20:48
  • It is not appearing for me in firefox. Widths are not an issue as I can hard specify them in the table layout and what goes in the bottom div is standardized. I am playing around with two divs in the cell now to see if that works. – user1260310 Sep 07 '12 at 20:53