Get a scrollbar with { position: absolute; right: 0px; }

I need to align some elements in an iframe to the right and have it activate a horizontal scrollbar on the iframe when it gets squished.

The following code (in the iframe) works perfectly with a left positioning:

<html>
    <body>
        <div>
            <table>
                <tr>
                    <td>lorem ipsum here</td>
                    <td>lorem ipsum here</td>
                    <td>lorem ipsum here</td>
                    <td>lorem ipsum here</td>
                    <td>lorem ipsum here</td>
                </tr>
            </table>
        </div>
    </body>
</html>

html{
    overflow:scroll;
}
table{
    position: absolute; 
    left: 0px;
}
td {
    white-space: nowrap;
    border: 1px solid black;
}

The exact same CSS with right positioning (right: 0px;) is broken, the horizontal scrollbar does not get activated.

EDIT: horizontal scrollbar

EDIT2: this HTML bit is in an iframe

EDIT3: Interestingly document.getElementById('tableID').scrollWidth gives accurate information about the scrollWidth the scrollBar should have but does not display. I might try an ugly ugly fix to my problem (ie create an artifical scroll bar, fml)

Solution

To get scrollbars, the table must appear in the flow; if you change its position to absolute, it's taken out of the flow, so without JavaScript to calculate figures (don't do that ever!) you can't do it.

It looks to me like what you want is just to remove the margin on the page. If this is correct, just put in your styles body { padding: 0; } (and remove the position and left from table).

Also, if you're just wanting it to scroll, you don't need to put it in an iframe (using iframes gratuitously is undesirable). overflow: scroll on the container is sufficient.

If you could post a more complete demonstration of what you're trying to achieve, more precise advice can be given.