By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,787 Members | 1,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,787 IT Pros & Developers. It's quick & easy.

Putting a button at the bottom of a table cell

P: n/a
I'm trying to put a utton at the bottom (right) of a TD cell,
irrespective of what else is in there. Usually, with other HTML block
elements, we're told to use

position: relative

on the parent element, and

position: absolute;
bottom: 0px;
top: auto;

on the child element. Except, it doesn't work if the parent element is a
td element, not on Firefox and Opera, anyway: the button is positioned
relative to the viewport (page or window), not to the table cell.

<table><tr><td style="position: relative">Blah blah...
<button style="position: absolute; top: auto; bottom:
2px">Reset</button>
</td>
<td>...</td>
</tr></table>

So I've tried to put a DIV layer between the TD and the button.

<table><tr><td>
<div style="position: relative; height: 100%">Blah blah...
<button style="position: absolute; top: auto; bottom:
2px">Reset</button>
</div>
</td>
<td>...</td>
</tr></table>

Then the previous problem turns into the other problem: how to make the
div occupy the full height of the parent table cell?

I've tried various things, you can see them in the test page at
<http://users.telenet.be/bartl/test/positionbottom.html>. But what works
in Firefox, doesn't work in MSIE (6 and 7), and vice versa; and none of
them work in Opera.

So... what should I be doing instead?

--
Bart.
Apr 12 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On 2007-04-12, Bart Lateur <ba*********@pandora.bewrote:
I'm trying to put a utton at the bottom (right) of a TD cell,
irrespective of what else is in there. Usually, with other HTML block
elements, we're told to use

position: relative

on the parent element, and

position: absolute;
bottom: 0px;
top: auto;

on the child element. Except, it doesn't work if the parent element is a
td element, not on Firefox and Opera, anyway: the button is positioned
relative to the viewport (page or window), not to the table cell.
Interesting, I would have expected that to work.

Can you not instead set vertical-align: bottom and text-align: right on
the table cell, and then just put the button in it, with no absolute or
relative positioning at all?
<table><tr><td style="position: relative">Blah blah...
<button style="position: absolute; top: auto; bottom:
2px">Reset</button>
</td>
<td>...</td>
</tr></table>

So I've tried to put a DIV layer between the TD and the button.

<table><tr><td>
<div style="position: relative; height: 100%">Blah blah...
<button style="position: absolute; top: auto; bottom:
2px">Reset</button>
</div>
</td>
<td>...</td>
</tr></table>

Then the previous problem turns into the other problem: how to make the
div occupy the full height of the parent table cell?
100% of a container whose height is auto (and therefore depends on its
contents) is ignored by spec-conforming browsers, although you'll get
different results if you invoke quirks mode, but don't do that.
I've tried various things, you can see them in the test page at
<http://users.telenet.be/bartl/test/positionbottom.html>. But what works
in Firefox, doesn't work in MSIE (6 and 7), and vice versa; and none of
them work in Opera.

So... what should I be doing instead?
Now I look at your example I see the button shares the cell with other
things. vertical-align: bottom on the whole cell might not align the
content with the top of the cell, which may be what you want. How about
giving each button its own cell, and using rowspan on the cells in the
other column? Or you could make each of the yellow cells a nested table,
with two rows and two cells, one for the button and one for the rest if
that's the easiest way to avoid ending up with a border splitting the
yellow cell.

Absolutely positioning is undesirable for other reasons too-- the
heights of the buttons will not be taken into account when row heights
are calculated and you could end up with the buttons overlaid on other
table content.
Apr 13 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.