Place button above table aligned to the right of the table

Question

How can I position a button above a table aligned to the right?

Imagine an imaginary vertical line that is placed to the right of the table. I want right limit of the button to be placed where that line is. Here's a draft:

The example ilustrated As you can see, the button is aliged with the table and does not belong to the table.
The table has its sizes set to auto.
I already tried using a div as a wrapper but that didn't work. Any alternatives?

Add: I forgot: The table is supposed to be aligned to the left.

score 9 · Accepted Answer · edited May 23 '17 at 12:24

9

Just add a div wrapper around the two with the following CSS:

display: inline-block; 
text-align: right;

jsFiddle Demo

My solution assumes that the button is not block, in that case you also have to float it (text-align will not affect it then).
display: inline-block; will not work on IE7, but there is a hack.

Little explanation:

display: inline-block; is the heart of this solution. It makes the container take up the width of its children, in this case probably the table (but there is no problem if the button is bigger).

edited May 23 '17 at 12:24

Community

1
1

answered Jul 07 '11 at 10:24

kapa

77,694
21
158
175

I don't want the table aligned to the right... (sorry I forgot to mention that) – brunoais Jul 07 '11 at 10:27
@brunoais The table is not aligned anywhere. `text-align` does not affect the table. Check the demo. – kapa Jul 07 '11 at 10:30
ok, got it. That's what I needed. And now it not only works with my browser, it also works with IE. Thanks – brunoais Jul 07 '11 at 10:42

score 1 · Answer 2 · answered Jul 07 '11 at 10:22

1

What about another table that holds the two elements (button and table) and then right-align the top cell? Maybe a little messy, but it would work.

answered Jul 07 '11 at 10:22

paperbd

153
1
11

too much mess. I want absolutely no mess at all. I'll use that only if there is no alternative to that. – brunoais Jul 07 '11 at 10:23
@paperbd -1 for using tables for layout. – kapa Jul 07 '11 at 10:40

Place button above table aligned to the right of the table

2 Answers2