DataTables.js - Table not loading initial 100% full width on page load
<p>I am loading a PHP page with a table using DataTables fixed header functionality.  I can not seem to get the table to be at 100% of page load while page renders.  It starts off as compressed (while loading) then expanded (once page renders).</p>

<p>I tried to resolve this by output buffering in php but can not get the effect of compression then expansion to go away.</p>

<p><strong>Initialization Code (At Bottom of Script)</strong></p>

<pre><code>$(document).ready(function() {
    $('#summary_table').DataTable( {
        "scrollY": 400,
        "scrollX": true,
         "bSort": false,
         "bPaginate": false,
         "autoWidth": false 
    } );

    $(".dataTables_wrapper").css("width","100%");
});
</code></pre>

<p>EDIT:</p>

<p>(Table is compressed during load but then goes to 100%.)</p>

<p><a href="https://i.stack.imgur.com/KCud1.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/KCud1.jpg" alt="Table during page load"></a></p>

<p><strong>PHP</strong></p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Action Item Summary&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="../css/style.css"/&gt;
    &lt;style&gt;
        thead th {
            background-color:#0038a8;
            font-weight: bold;
            font-style: italic;
            color: white;
            text-align: left;
        }

        table:not(#header):not(#menu):not(#find) {
            background-color: white;
            width: 100%;
        }
        td {
            width: auto;
            min-width: auto;
            white-space: nowrap;
        }
        input[type='text'] {
            width: 50%;
            min-width: 100%;
        }

        span {
            white-space: nowrap;
        }

        span.late{
            color: red;
        }
        thead tr td a{
            color: white;
        }
        th a:hover
        {
            cursor: pointer;
            text-decoration: underline;
        }   
    div.dataTables_wrapper {
        width: 100%;
        margin: 0 auto;
    }
    div.dataTables_scrollBody table#summary_table {
        width: 100% !important;
    }

    table.dataTable tr.odd { background-color: #dae1e9; }
    table.dataTable tr.even { background-color: white; }

    &lt;/style&gt;

    &lt;script type="text/javascript" src="../js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="../js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="../js/table.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
&lt;? $pageTitle="All Action Items (".count($resAll).")"; include_once('../shared/pageheader.php'); ?&gt;
&lt;?if (isset($_SESSION['filteron']) &amp;&amp; $_SESSION['filteron'] == true):?&gt;&lt;div style="position:relative; float:right; display: inline; font-weight: bold; color:red; font-size: 12pt; background-color: lightgray; margin-right: 10"&gt;  Filter On &lt;/div&gt;&lt;br /&gt;&lt;?endif;?&gt;
&lt;form method="POST" action="/actionitems/viewactionitem.php"&gt;
&lt;table id="find" border="1"&gt;
&lt;tr&gt;
    &lt;td class="label"&gt;Find Action Item&lt;/td&gt;
    &lt;td style="width:100 !important"&gt;&lt;input type="text" id="id" name="id" value=""&gt;&lt;/input&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="submit" value="View" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="button" value="Find" onclick="jumpTo($('#id').val())"+/&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;table style="background-color: transparent"&gt;
&lt;tr&gt;
    &lt;td id="left" align="left"&gt;
        &lt;? if($_SESSION['userrole'] == 'Admin'): ?&gt;[&lt;a style="text-decoration: underline; color: black" href="newactionitem.php"&gt;&lt;b&gt;Add New Action Item&lt;/b&gt;&lt;/a&gt;] &lt;? endif;?&gt;
    &lt;/td&gt;
    &lt;td id="middle" align="middle"&gt;
        [&lt;a style="text-decoration: underline; color: black" href="allactionitems.php"&gt;&lt;b&gt;All Action Items&lt;/b&gt;&lt;/a&gt;] &amp;nbsp; 
        [&lt;a style="text-decoration: underline; color: black" href="openactionitems.php"&gt;&lt;b&gt;Open Action Items&lt;/b&gt;&lt;/a&gt;] &amp;nbsp; 
        [&lt;a style="text-decoration: underline; color: black" href="completedactionitems.php"&gt;&lt;b&gt;Completed Action Items&lt;/b&gt;&lt;/a&gt;] &amp;nbsp; 
        [&lt;a style="text-decoration: underline; color: black" href="closedactionitems.php"&gt;&lt;b&gt;Closed Action Items&lt;/b&gt;&lt;/a&gt;]
    &lt;/td&gt;
    &lt;td id="right"&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;form style="display:inline" id="summaryform" method="POST" action="allactionitems.php"&gt;
&lt;div class="summary_table" style="&lt;? if(count($resAll)&gt;  23): ?&gt;height:500;&lt;?endif;?&gt; overflow-y:auto"&gt;
&lt;table id="summary_table" class="display nowrap"  style="width: 1000" border=1&gt;
    &lt;thead class="header"&gt;
        &lt;tr&gt;
            &lt;? foreach ($cols as $cidx=&gt;$col): ?&gt;
                &lt;? if (!in_array($col, $hideCols)): ?&gt;
                    &lt;th&gt;
                    &lt;?if (in_array($col, $categoryNames)):?&gt;
                        &lt;a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=&lt;?=$manageActionItems-&gt;getCategoryName($col)?&gt;&amp;dir=&lt;?=($dir=="DESC")?"ASC":"DESC"?&gt;'); $('#summaryform').submit();"&gt;&lt;?=$manageActionItems-&gt;getCategoryName($col)?&gt;&lt;/a&gt;&lt;? if ($orderBy == $manageActionItems-&gt;getCategoryName($col) &amp;&amp; $dir == "DESC") echo "&lt;white&gt;&amp;#9660;&lt;/white&gt;"; else if ($orderBy == $manageActionItems-&gt;getCategoryName($col) &amp;&amp; $dir == "ASC")  echo "&lt;white&gt;&amp;#9650;&lt;/white&gt;"; else echo "&lt;span style='display: inline-block; width: 13'&gt;&lt;/span&gt;";?&gt;&lt;/td&gt;
                    &lt;? else:?&gt;
                        &lt;a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=&lt;?=$col?&gt;&amp;dir=&lt;?=($dir=="DESC")?"ASC":"DESC"?&gt;'); $('#summaryform').submit();"&gt;&lt;?=($col=="ActionItemID")?"ID": $col?&gt;&lt;/a&gt;&lt;? if ($orderBy == $col &amp;&amp; $dir == "DESC") echo "&lt;white&gt;&amp;#9660;&lt;/white&gt;"; else if ($orderBy == $col &amp;&amp; $dir == "ASC")  echo "&lt;white&gt;&amp;#9650;&lt;/white&gt;"; else echo "&lt;span style='display: inline-block; width: 13'&gt;&lt;/span&gt;"; ?&gt;
                    &lt;?endif;?&gt;
                    &lt;/th&gt;
                &lt;? endif; ?&gt;
            &lt;? endforeach; ?&gt;
            &lt;th&gt;
                View
            &lt;/th&gt;   
            &lt;th&gt;
                Edit
            &lt;/th&gt;   
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;? foreach($resAll as $idx=&gt;$row): ?&gt;
        &lt;? //echo"&lt;pre&gt;"; var_dump($row); echo"&lt;/pre&gt;"; ?&gt;
        &lt;tr id="row&lt;?=$row['ActionItemID']?&gt;"&gt;
            &lt;? foreach ($cols as $cidx=&gt;$col): ?&gt;
                &lt;? if (!in_array($col, $hideCols)): ?&gt; 
                            &lt;td &lt;? if($orderBy == $col) echo "class='sort'"; ?&gt;&gt;
                            &amp;nbsp;
                    &lt;/td&gt;
                &lt;? endif; ?&gt;
            &lt;? endforeach; ?&gt;
            &lt;td&gt;
                &lt;a href="viewactionitem.php?id=&lt;?=$row['ActionItemID']?&gt;"&gt;View&lt;/a&gt;
                    &lt;!--input type="submit" value="View" style="width:60;height:20;border:none; font-weight: bold"/--&gt;
                &lt;/form&gt;
            &lt;/td&gt;
            &lt;td&gt;
            &lt;? if(($_SESSION['userrole'] == 'Admin' &amp;&amp; $_SESSION['userrole'] == 'Admin') || isset($_SESSION['userid']) &amp;&amp;($row['OwnerID'] == $_SESSION['userid'] || $row['AltOwnerID'] == $_SESSION['userid'])):?&gt;
                &lt;a href="editactionitem.php?id=&lt;?=$row['ActionItemID']?&gt;"&gt;Edit&lt;/a&gt;
                &lt;? endif; ?&gt;
                    &lt;!--input type="submit" value="Edit" style="width:60;height:20; border:none;font-weight: bold" /--&gt;
                &lt;/form&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;? endforeach; ?&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;script&gt;
$(document).ready(function() {
    $('#summary_table').DataTable( {
        "scrollY": 400,
        "scrollX": true,
         "bSort": false,
         "bPaginate": false,
         "autoWidth": false 
    } );

    $(".dataTables_wrapper").css("width","100%");
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>div#splash
{
    background-color:#d8d8d8;
}

body
{
    font-family: arial;
}

textarea
{
    width: 100%;
    max-width: auto;
    height: 100px;
    max-height: 85px;
    overflow-y:scroll;
    resize: none;
    font-family: inherit;
}

html * :not(h1):not(h2)
{
    font-size: 10pt;
}

body
{
    margin: 0px;    
    background-image: url('/img/custom_back.gif');
}

h1, h2
{   
    font-family: arial;
    text-align: center;
}

h3
{
    font-size: 75%;
}

table.data tr td:not(.label)
{
    background-color:white;
}

td#left
{
    width: 25%;
}

td#right
{
    width: 25%;
}

td#middle
{
    width: 50%;
}

td.label
{
    font-weight: bold;
    font-style: italic;
}

table#find tr td.label,
table.data tr td.label
{
    background-color:#0038a8;
    color: white;
}

table.data tr td.label,
table.data:not(#details) tr td
{
    width: 25%;
}

table.data
{
    margin: 0 auto;
}

table#header
{
    width: 100% !important;
}

table#header tr td
{
    vertical-align: middle;
    background-color: transparent;
}


input[type=submit]
{
    margin: 0 auto;
}

td
{
    vertical-align: middle;
}
div#header div
{
    display:inline-block;
}

div#title
{
    font-style: italic;
}

img#logo
{
    width: 95px;
    height: 95px;
}

table#toolname td
{
    font-weight: bold;
    font-size: 15px;
}

table#menu 
{
    background-color: #0038a8;
}

.required
{
            border-style:solid;
            border-width:2px;
            border-color:red;
}

td &gt; div:not(.filterinput):not(.cell) 
{ 
    height: 85px;
    max-height: 85px;
    overflow-y:scroll;
    overflow-x:hidden;
} 

td.sort
{
    background-color: lightgray;
}
</code></pre>

<p>How do I resolve this issue?</p>