すべての親コンテナの幅を取得できません

Question

私はすべてのコンテナの幅にテーブルを表示しようとしていますが、実際にはcol-sm-2クラスとブートストラップのhideable-sidebarを使用しています。これは私のHTML構造である：

<div class="col-sm-2 hideable-sidebar" id="resource_container"> 

      <h4>Resource</h4> 

      <div class="input-group"> 
       <input type="text" placeholder="search" class="form-control" > 
       <span class="input-group-btn"> 
        <button class="clear btn btn-default" type="button"> 
         <span class="glyphicon glyphicon-remove"></span> 
        </button> 
        </span> 
      </div> 

      <table style="margin-top: 10px; height: 396px;" border='1'> 
      <tr id="res-1"><td style="background-color:#FF000C" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr> 
      <tr id="res-1"><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr> 
      <tr id="res-1"><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr> 
      </table> 

     </div> 

And here the JSFIDDLE

これは私が取る必要があり、最終的な結果の画像です：私が行ったよう

Answer 1

ちょうどあなたのテーブルにwidth: 100%;を追加しますここをクリックしてください： https://jsfiddle.net/DTcHh/28309/

私はあなたが探しているものですここで:)

Answer 2

用すると、完全なコード..です

ちょうど

<div class="col-sm-2 hideable-sidebar" id="resource_container"> 

       <h4>Resource</h4> 

       <div class="input-group"> 
        <input type="text" placeholder="search" class="form-control" > 
        <span class="input-group-btn"> 
         <button class="clear btn btn-default" type="button"> 
          <span class="glyphicon glyphicon-remove"></span> 
         </button> 
         </span> 
       </div> 

       <table border='1' style="margin-top: 10px; height: 396px; width: 100%;"> 
       <tr id="res-1"><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr> 
       <tr id="res-1"><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr> 
       <tr id="res-1"><td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr> 
       </table> 

      </div>