Question

我在twitter bootstrap中遇到了桌子。无论我尝试什么，我都无法在跨度内得到我的表，我认为它与bootstrap CSS有关，我需要在span或hero-unit中对我的表行进行对齐。

<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元素来定位span，则需要将跨度设置为块级元素。 Span本质上不是块级元素;因此，它会折叠并且不会在页面流中包含表格。使用block或inline-block是您可以更改正确包含范围的方法之一。然而，为了使它更容易，您可以始终只使用块级元素开始，例如div或为表本身设置样式。

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

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

Twitter Bootstrap表调整大小，行溢出

1 个答案: