CODEWITHSUNDEEP
htmlcsshtml-table
user1260310
user1260310

Reputation: 2227

html/css using div in table

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>

Upvotes: 0

Views: 556

Answers (1)

Logard
Logard

Reputation: 1513

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!

Upvotes: 2

Related Questions