调整从jquery调用返回的html的所有元素的大小

I am using ZFTable plugin to generate table. The table is generated by jquery call. The table overflows the page to the right. How to adjust all other elements on the page to the width of html returned from jquery call. I guess, there are two ways either adjust all other elements to the html from jquery, or adjust html returned to the page's width. I tried to play with css in firebug, but could not find a way to make the page look uniformly.

Code to add ZFTable:

<div id="tableContainer"></div>

<script>

    debugger;

    $("#tableContainer").zfTable('/table/ajax-doctrine', {

        beforeSend: function() {
            console.log('beforeSend');
        },
        success: function() {
            console.log('success');
        },
        error: function() {
            console.log('error');
        },
//        complete: function() {
//            console.log('complete');
//        },

        onInit: function() {
            console.log('onInit');
        },

        complete: function () {

            debugger;

            console.log('complete');

            debugger;

            afterSigPadsHtmlLoaded();

            debugger;

            setAjaxSignatureSubmit();

            //Edit 1:
            $("#tabs").css("max-width", $(window).width());

            jQuery('#tableContainer').css("overflow-x", "scroll");


        }
    });
    debugger;
</script>

Here is the webpage:

Here is the style of the top element overflowing the page

EDIT 1: I edited jquery code as suggested and added a scroll (Edit 1):

But the best what I could get is two scroll bars: one which I create and another is from the browser.

Just adjusting max-width produces the following:

I got this result with scrolling though:

You have a lot of columns in the table. I'm not sure the browser can compress more the table width. I would try this: add after setAjaxSignatureSubmit():

$("#tabs").css("max-width", $(window).width());