How to make DIV width be flexible UP TO the width of the viewport

Question

I've got a table that is contained by a div.

My two requirements:

1. The container div should be only as wide as the table it contains.
2. At maximum, the container div should be only as wide as the viewport (using using overflow-x: scroll to see the whole table.

I can achieve the first requirement with display: table, display: inline-block, or display: inline-table.

I can achieve the second requirement with display: block.

I can't see to nail both requirements. I have tried every display option available in CSS3, but none produce the results I'm seeing. Is it even possible without using javascript?

Here is my fiddle: http://jsfiddle.net/5VBPm/

Answer 1

putting display: inline-block will suffice for the container div and leaving the overflow-x: scroll. I forked your fiddle here http://jsfiddle.net/khcQZ/

Are you using any other containing divs beyond the div that you have?