I'm trying to write a simple JavaScript based modal dialog. The JavaScript function takes the content, puts it in a new iframe and adds the iframe to the page. Works great so far, the only problem is that the content of the dialog (e.g. a table) gets wrapped, although plenty of space is available on the page.

I'd like the content of the dialog, a table in my case, to use as much space as it needs, without wrapping any lines. I tried lots of combinations of setting width/style.width on the iframe and the table. Nothing did the trick.

Here the code to show the iframe dialog:

function SimpleDialog() {

    this.domElement = document.createElement('iframe');
    this.domElement.setAttribute('style', 'border: 1px solid red; z-index: 201; position: absolute; top: 0px; left: 0px;');

    this.showWithContent = function(content) {

        document.getElementsByTagName('body')[0].appendChild(this.domElement);

        this.domElement.contentDocument.body.appendChild(content);

        var contentBody   =   this.domElement.contentDocument.body;
        contentBody.style.padding = '0px';
        contentBody.style.margin  = '0px';

        // Set the iframe size to the size of content.
        // However, content got wrapped already.
        this.domElement.style.height = content.offsetHeight + 'px';
        this.domElement.style.width  = content.offsetWidth  + 'px';

        this._centerOnScreen();
    };

    this._centerOnScreen = function() {
        this.domElement.style.left = window.pageXOffset + (window.innerWidth  / 2) - (this.domElement.offsetWidth  / 2) + 'px';
        this.domElement.style.top  = window.pageYOffset + (window.innerHeight / 2) - (this.domElement.offsetHeight / 2) + 'px';

    };
}

Here the test code:

var table = document.createElement('table');
table.setAttribute('style', 'border: 1px solid black; width: 100%;');

table.innerHTML = "<tr><td style='font-size:40px;'>Hello world in big letters</td></tr><tr><td>second row</td></tr>";

var dialog = new SimpleDialog();

dialog.showWithContent(table);

The table shows up nicely centered on the page, but the words in the first cell are wrapped to two lines. How do I get the table to use as much space as it needs (without using white-space: nowrap ;)

Thanks in advance for any suggestions!

-Mark