为未应用于隐藏元素的元素赋予宽度

Question

以下是我的代码段。如果您点击标有“切换第二个div标签的按钮，则会隐藏/显示ID为”秒“的div。

现在问题是，div中具有id为“second”的div内的div的宽度未赋予其父容器的base宽度（div有一类“perent”）。如果您不隐藏ID为“秒”的div（删除“隐藏”类），则可以看到其子div（div具有“ overflow_x“）的宽度等于其父容器（div，其类别为”perent“）但如果您默认隐藏它，则div s div具有“overflow_x”类的类的宽度等于其父容器（$(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(); }); });，其类别为“perent”）。

请提供任何帮助，想法，线索，建议和建议吗？

PS：根据我的观察，它看起来像是给出百分比宽度而不是像素。

.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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<button class="btn btn-success" id="btn1">TOGGLE THE SECOND DIV</button>
<div class="divider"></div>
<div class="full_width extend clear" id="first">

  <div class="container-fluid">

    <div class="row">

      <div class="col-sm-6 perent">
        <div class="overflow_x">
          <table class="table">
            <thead>
                <tr>
                  <th>Head 1</th>
                  <th>Head 2</th>
                  <th>Head 3</th>
                  <th>Head 4</th>
                  <th>Head 5</th>
                  <th>Head 6</th>
                  <th>Head 7</th>
                  <th>Head 8</th>
                  <th>Head 9</th>
                  <th>Head 10</th>
                  <th>Head 11</th>
                  <th>Head 12</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                  <td>Head 1</td>
                  <td>Head 2</td>
                  <td>Head 3</td>
                  <td>Head 4</td>
                  <td>Head 5</td>
                  <td>Head 6</td>
                  <td>Head 7</td>
                  <td>Head 8</td>
                  <td>Head 9</td>
                  <td>Head 10</td>
                  <td>Head 11</td>
                  <td>Head 12</td>
                </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="col-sm-6 perent">
        <div class="overflow_x">
          <table class="table">
            <thead>
                <tr>
                  <th>Head 1</th>
                  <th>Head 2</th>
                  <th>Head 3</th>
                  <th>Head 4</th>
                  <th>Head 5</th>
                  <th>Head 6</th>
                  <th>Head 7</th>
                  <th>Head 8</th>
                  <th>Head 9</th>
                  <th>Head 10</th>
                  <th>Head 11</th>
                  <th>Head 12</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                  <td>Head 1</td>
                  <td>Head 2</td>
                  <td>Head 3</td>
                  <td>Head 4</td>
                  <td>Head 5</td>
                  <td>Head 6</td>
                  <td>Head 7</td>
                  <td>Head 8</td>
                  <td>Head 9</td>
                  <td>Head 10</td>
                  <td>Head 11</td>
                  <td>Head 12</td>
                </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>

  </div>

  </div>

  <div class="divider"></div>
  <div class="full_width extend clear thehide" id="second">

  <div class="container-fluid">

    <div class="row">

      <div class="col-sm-6 perent">
        <div class="overflow_x">
          <table class="table">
            <thead>
                <tr>
                  <th>Head 1</th>
                  <th>Head 2</th>
                  <th>Head 3</th>
                  <th>Head 4</th>
                  <th>Head 5</th>
                  <th>Head 6</th>
                  <th>Head 7</th>
                  <th>Head 8</th>
                  <th>Head 9</th>
                  <th>Head 10</th>
                  <th>Head 11</th>
                  <th>Head 12</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                  <td>Head 1</td>
                  <td>Head 2</td>
                  <td>Head 3</td>
                  <td>Head 4</td>
                  <td>Head 5</td>
                  <td>Head 6</td>
                  <td>Head 7</td>
                  <td>Head 8</td>
                  <td>Head 9</td>
                  <td>Head 10</td>
                  <td>Head 11</td>
                  <td>Head 12</td>
                </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="col-sm-6 perent">
        <div class="overflow_x">
          <table class="table">
            <thead>
                <tr>
                  <th>Head 1</th>
                  <th>Head 2</th>
                  <th>Head 3</th>
                  <th>Head 4</th>
                  <th>Head 5</th>
                  <th>Head 6</th>
                  <th>Head 7</th>
                  <th>Head 8</th>
                  <th>Head 9</th>
                  <th>Head 10</th>
                  <th>Head 11</th>
                  <th>Head 12</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                  <td>Head 1</td>
                  <td>Head 2</td>
                  <td>Head 3</td>
                  <td>Head 4</td>
                  <td>Head 5</td>
                  <td>Head 6</td>
                  <td>Head 7</td>
                  <td>Head 8</td>
                  <td>Head 9</td>
                  <td>Head 10</td>
                  <td>Head 11</td>
                  <td>Head 12</td>
                </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>

  </div>

  </div>

SDL_Renderer