title: Twitter Bootstrap table resize , row overflow
body: <p>I'm stuck with tables in twitter bootstrap. No matter what I try I'm not able to get my table within the span, I think it has something to do with the bootstrap CSS, I need my table rows to be justified within the span or hero-unit.</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
    &lt;table  id="table" 
            class="table table-bordered table-condensed table-striped form-group"&gt;
      &lt;tbody&gt;
         &lt;tr&gt;
           &lt;th&gt;Sl. No.&lt;/th&gt;
           &lt;th class=""&gt;Name&lt;/th&gt;
           &lt;th&gt;C/NC&lt;/th&gt;
           &lt;th class=""&gt;Quantity&lt;/th&gt;
           &lt;th&gt;Price&lt;/th&gt;
           &lt;th&gt;&lt;input type="button" class="btn btn-success" id="addmorebutton" 
                      value="Add" onclick="addRow();"/&gt;&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr id="templateRow"&gt;
          &lt;td&gt;&lt;input type="text" placeholder="In Words"&gt;&lt;/td&gt;
          &lt;td class=""&gt;&lt;input type="text" placeholder="In Words"&gt;&lt;/td&gt;
          &lt;td&gt;
             &lt;select class="input-sm col-lg-2"&gt;
                &lt;option&gt;Consumable&lt;/option&gt;
                &lt;option&gt;Non Consumable&lt;/option&gt;
             &lt;/select&gt;
          &lt;/td&gt;
          &lt;td class=""&gt;&lt;input type="text" placeholder="In Numbers"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" placeholder="In Numbers"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="button" class="btn btn-danger" id="addmorebutton" 
                     value="Delete" onclick="delRow(this);"/&gt;&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>