title: Cannot make DIV width 100% with scrollbar
body: <p>I have a page with a DIV and a TABLE. The DIV is my header and I want it to be 100% width even when horizontal scroll-bar displayed. For some reason it takes only 100% of visible window.</p>
  
  <p>My HTML code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;body&gt;
  
      &lt;div style="background-color:yellow;"&gt;100% DIV&lt;/div&gt;
  
      &lt;table style="width:100%; background-color:orange;"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th style="padding-left:20px; padding-right:20px;"&gt;Very_Long_Header_1&lt;/th&gt;
                  &lt;th style="padding-left:20px; padding-right:20px;"&gt;Very_Long_Header_2&lt;/th&gt;
                  &lt;th style="padding-left:20px; padding-right:20px;"&gt;Very_Long_Header_3&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I scroll to the right the DIV does not use all the width:</p>
  
  <p><a href="https://i.stack.imgur.com/F48ep.png" rel="noreferrer"><img src="https://i.stack.imgur.com/F48ep.png" alt=""></a></p>
  
  <p>How can I make the DIV to take 100% of the page width? Ideally I do not want to change the TABLE because it's a generated code.</p>