Kann nicht alle übergeordneten Container Breite

Question

Ich versuche, die Tabelle auf alle Container Breite anzuzeigen, tatsächlich verwende ich die col-sm-2 Klasse und die hideable-sidebar Bootstrap. Das ist mein HTML-Struktur:

<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

Dies ist ein Bild des Endergebnisses, die ich nehmen muss:

Answer 1

Nur width: 100%; zu Ihrer Tabelle hinzuzufügen, wie ich es tat hier: https://jsfiddle.net/DTcHh/28309/

Ich hoffe es ist was du suchst ing für :)

Answer 2

Hier ist der vollständige Code ..

Gerade COPY vorbei ..

<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>