css - Twitter Bootstrap 表调整大小，行溢出

Question

我受困于 Twitter Bootstrap 中的表格。无论我尝试什么，我都无法在跨度内获得我的表格，我认为这与 Bootstrap CSS 有关，我需要我的表格行在跨度或英雄单元内对齐。

<div class="table-responsive">
  <table  id="table" 
          class="table table-bordered table-condensed table-striped form-group">
    <tbody>
       <tr>
         <th>Sl. No.</th>
         <th class="">Name</th>
         <th>C/NC</th>
         <th class="">Quantity</th>
         <th>Price</th>
         <th><input type="button" class="btn btn-success" id="addmorebutton" 
                    value="Add" onclick="addRow();"/></th>
      </tr>
      <tr id="templateRow">
        <td><input type="text" placeholder="In Words"></td>
        <td class=""><input type="text" placeholder="In Words"></td>
        <td>
           <select class="input-sm col-lg-2">
              <option>Consumable</option>
              <option>Non Consumable</option>
           </select>
        </td>
        <td class=""><input type="text" placeholder="In Numbers"></td>
        <td><input type="text" placeholder="In Numbers"></td>
        <td><input type="button" class="btn btn-danger" id="addmorebutton" 
                   value="Delete" onclick="delRow(this);"/></td>
     </tr>
   </tbody>
 </table>
</div>

Answer 1

如果您尝试定位 table通过为 parent 设置样式 span元素，您需要将跨度变成 block 级元素。 Span 本质上不是 block 级元素；因此，它会折叠并且不会在页面流中包含表格。使用 block或 inline-block是您可以更改跨度以正确包含的方法之一。但是，为了使其更容易，您始终可以只使用 block 级元素开头，例如 div。或设置表格本身的样式。

尝试 display:block;在你的 <span> CSS。这将强制它包含其子元素。

没有更多信息，很难理解您要完成的任务。 有关 block 级元素的更多信息:https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements