Place button above table aligned to the right of the table

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

I开发者_开发问答magine 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:

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.

---

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).

---

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.