title: Giving a width to the element not applied to the hidden element
body: <p>Below is my snippet. If you click on the button that has the label "toggle the second <code>div</code>, then the <code>div</code> that has id "second" will be hidden/shown.</p>
  
  <p>Now, the problem is, width of the <code>div</code>s that have class "overflow_x" inside the <code>div</code> that has id "second", is not given to the width of base on its parent container (<code>div</code> that has a class of "perent"). If you don't hide the <code>div</code> that has id "second" (remove the "thehide" class), you can see that its child <code>div</code> (<code>div</code> that has a class of "overflow_x") has been given a width equal to its parent container (<code>div</code> that has a class of "perent") but if you hide it by default, the child <code>div</code>s (<code>div</code> that has a class of "overflow_x") are not given the width equals to its parent container (<code>div</code> that has a class of "perent").</p>
  
  <p>Any help, ideas, clues, recommendations, suggestions please?</p>
  
  <p>PS: from my observation, it looks like its giving a percent width instead of pixels.</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-js lang-js prettyprint-override"><code>$(window).load(function(){
    $(".overflow_x table").hide();
    $(".overflow_x").each(function(){
      console.log($(this).closest(".perent").width() + 'px');
              $(this).css({ 'width' : $(this).closest(".perent").width() + 'px' });
              if($(this).find("table").length){
                  $(this).find("table").show();
  
              }
          });
  });
  
  $(document).ready(function(){
    $(".thehide").hide();
    $("#btn1").click(function(){
      $("#second").toggle();
  
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.overflow_x{overflow-x: auto; overflow-y: hidden;border: 1px solid red;}
  .table{width: 100%;}
  .table th, .table td{text-align: center;text-transform: uppercase;}
  .table th:first-child{text-align: left !important;}
  .extend{max-width:100%;max-height:100%;}
  .clear{clear:both !important;float:none !important;}
  .full_width{width: 100%;}
  .center{margin-left: auto !important; margin-right: auto !important;}
  .divider{height: 10px; clear: both; float: none; width: 100%;}
  .display_table{display: table;}
  #first{border: 1px solid red;padding:15px;}
  #second{border: 1px solid blue;padding:15px;}
  .thehide{display: none;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;button class="btn btn-success" id="btn1"&gt;TOGGLE THE SECOND DIV&lt;/button&gt;
  &lt;div class="divider"&gt;&lt;/div&gt;
  &lt;div class="full_width extend clear" id="first"&gt;
  
    &lt;div class="container-fluid"&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="col-sm-6 perent"&gt;
          &lt;div class="overflow_x"&gt;
            &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Head 1&lt;/th&gt;
                    &lt;th&gt;Head 2&lt;/th&gt;
                    &lt;th&gt;Head 3&lt;/th&gt;
                    &lt;th&gt;Head 4&lt;/th&gt;
                    &lt;th&gt;Head 5&lt;/th&gt;
                    &lt;th&gt;Head 6&lt;/th&gt;
                    &lt;th&gt;Head 7&lt;/th&gt;
                    &lt;th&gt;Head 8&lt;/th&gt;
                    &lt;th&gt;Head 9&lt;/th&gt;
                    &lt;th&gt;Head 10&lt;/th&gt;
                    &lt;th&gt;Head 11&lt;/th&gt;
                    &lt;th&gt;Head 12&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;Head 1&lt;/td&gt;
                    &lt;td&gt;Head 2&lt;/td&gt;
                    &lt;td&gt;Head 3&lt;/td&gt;
                    &lt;td&gt;Head 4&lt;/td&gt;
                    &lt;td&gt;Head 5&lt;/td&gt;
                    &lt;td&gt;Head 6&lt;/td&gt;
                    &lt;td&gt;Head 7&lt;/td&gt;
                    &lt;td&gt;Head 8&lt;/td&gt;
                    &lt;td&gt;Head 9&lt;/td&gt;
                    &lt;td&gt;Head 10&lt;/td&gt;
                    &lt;td&gt;Head 11&lt;/td&gt;
                    &lt;td&gt;Head 12&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-6 perent"&gt;
          &lt;div class="overflow_x"&gt;
            &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Head 1&lt;/th&gt;
                    &lt;th&gt;Head 2&lt;/th&gt;
                    &lt;th&gt;Head 3&lt;/th&gt;
                    &lt;th&gt;Head 4&lt;/th&gt;
                    &lt;th&gt;Head 5&lt;/th&gt;
                    &lt;th&gt;Head 6&lt;/th&gt;
                    &lt;th&gt;Head 7&lt;/th&gt;
                    &lt;th&gt;Head 8&lt;/th&gt;
                    &lt;th&gt;Head 9&lt;/th&gt;
                    &lt;th&gt;Head 10&lt;/th&gt;
                    &lt;th&gt;Head 11&lt;/th&gt;
                    &lt;th&gt;Head 12&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;Head 1&lt;/td&gt;
                    &lt;td&gt;Head 2&lt;/td&gt;
                    &lt;td&gt;Head 3&lt;/td&gt;
                    &lt;td&gt;Head 4&lt;/td&gt;
                    &lt;td&gt;Head 5&lt;/td&gt;
                    &lt;td&gt;Head 6&lt;/td&gt;
                    &lt;td&gt;Head 7&lt;/td&gt;
                    &lt;td&gt;Head 8&lt;/td&gt;
                    &lt;td&gt;Head 9&lt;/td&gt;
                    &lt;td&gt;Head 10&lt;/td&gt;
                    &lt;td&gt;Head 11&lt;/td&gt;
                    &lt;td&gt;Head 12&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="divider"&gt;&lt;/div&gt;
    &lt;div class="full_width extend clear thehide" id="second"&gt;
  
    &lt;div class="container-fluid"&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="col-sm-6 perent"&gt;
          &lt;div class="overflow_x"&gt;
            &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Head 1&lt;/th&gt;
                    &lt;th&gt;Head 2&lt;/th&gt;
                    &lt;th&gt;Head 3&lt;/th&gt;
                    &lt;th&gt;Head 4&lt;/th&gt;
                    &lt;th&gt;Head 5&lt;/th&gt;
                    &lt;th&gt;Head 6&lt;/th&gt;
                    &lt;th&gt;Head 7&lt;/th&gt;
                    &lt;th&gt;Head 8&lt;/th&gt;
                    &lt;th&gt;Head 9&lt;/th&gt;
                    &lt;th&gt;Head 10&lt;/th&gt;
                    &lt;th&gt;Head 11&lt;/th&gt;
                    &lt;th&gt;Head 12&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;Head 1&lt;/td&gt;
                    &lt;td&gt;Head 2&lt;/td&gt;
                    &lt;td&gt;Head 3&lt;/td&gt;
                    &lt;td&gt;Head 4&lt;/td&gt;
                    &lt;td&gt;Head 5&lt;/td&gt;
                    &lt;td&gt;Head 6&lt;/td&gt;
                    &lt;td&gt;Head 7&lt;/td&gt;
                    &lt;td&gt;Head 8&lt;/td&gt;
                    &lt;td&gt;Head 9&lt;/td&gt;
                    &lt;td&gt;Head 10&lt;/td&gt;
                    &lt;td&gt;Head 11&lt;/td&gt;
                    &lt;td&gt;Head 12&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-6 perent"&gt;
          &lt;div class="overflow_x"&gt;
            &lt;table class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Head 1&lt;/th&gt;
                    &lt;th&gt;Head 2&lt;/th&gt;
                    &lt;th&gt;Head 3&lt;/th&gt;
                    &lt;th&gt;Head 4&lt;/th&gt;
                    &lt;th&gt;Head 5&lt;/th&gt;
                    &lt;th&gt;Head 6&lt;/th&gt;
                    &lt;th&gt;Head 7&lt;/th&gt;
                    &lt;th&gt;Head 8&lt;/th&gt;
                    &lt;th&gt;Head 9&lt;/th&gt;
                    &lt;th&gt;Head 10&lt;/th&gt;
                    &lt;th&gt;Head 11&lt;/th&gt;
                    &lt;th&gt;Head 12&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                    &lt;td&gt;Head 1&lt;/td&gt;
                    &lt;td&gt;Head 2&lt;/td&gt;
                    &lt;td&gt;Head 3&lt;/td&gt;
                    &lt;td&gt;Head 4&lt;/td&gt;
                    &lt;td&gt;Head 5&lt;/td&gt;
                    &lt;td&gt;Head 6&lt;/td&gt;
                    &lt;td&gt;Head 7&lt;/td&gt;
                    &lt;td&gt;Head 8&lt;/td&gt;
                    &lt;td&gt;Head 9&lt;/td&gt;
                    &lt;td&gt;Head 10&lt;/td&gt;
                    &lt;td&gt;Head 11&lt;/td&gt;
                    &lt;td&gt;Head 12&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>