title: DataTables.js - Table not loading initial 100% full width on page load
body: <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>