2016-02-25 88 views
1

我正在嘗試調整表格的輸入/ td字段大小,但似乎無法使其工作。我一直在引用下面的堆棧文章。仍然沒有運氣。Bootstrap 3調整表格數據和輸入字段的大小

stack-post-ref

jsfiddle-for-table

<div class="table-responsive"> 
    <table class="table"> 
    <thead> 
     <tr> 
     <th>XS</th> 
     <th>S</th> 
     <th>M</th> 
     <th>L</th> 
     <th>XL</th> 
     <th>XXL</th> 
     <th>XXXL</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td class="col-md-1"><input type="number" name="xs" ng-model="order.size.extra_small"></td> 
     <td class="col-md-1"><input type="number" name="s" ng-model="order.size.small"></td> 
     <td class="col-md-1"><input type="number" name="m" ng-model="order.size.medium"></td> 
     <td class="col-md-1"><input type="number" name="l" ng-model="order.size.large"></td> 
     <td class="col-md-1"><input type="number" name="xl" ng-model="order.size.extra_large"></td> 
     <td class="col-md-1"><input type="number" name="xxl" ng-model="order.size.double_extra_large"></td> 
     <td class="col-md-1"><input type="number" name="xxxl" ng-model="order.size.triple_extra_large"></td> 
     </tr> 
    </tbody> 
    </table> 
</div> 
+0

爲什麼設法使一個表,並使用列斯蒂林g從bootstrap,它似乎是多餘的?或者將它分成若干列,用col-xx-#選擇器調整大小,或者如下面的答案所示,自己設置表格 –

回答

0

對於我這樣工作的:

<div class="table-responsive"> 
      <table class="table table-striped"> 
       <thead> 
       <tr> 
        <th>#</th> 
        <th>Header</th> 
        <th>Header</th> 
        <th>Header</th> 
        <th>Header</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td><input type... /></td> 
        <td>libero</td> 
        <td>Sed</td> 
        <td>cursus</td> 
        <td>ante</td> 
       </tr> 
       <tr> 
        <td>1,004</td> 
        <td>dapibus</td> 
        <td>diam</td> 
        <td>Sed</td> 
        <td>nisi</td> 
       </tr> 
       </tbody> 
      </table> 
      </div>