2017-05-10 49 views
0

表在引导网格系统

<table class="fees-table table-bordered" data-toggle="table"> 
 
          <thead> 
 
           <tr> 
 
            <th> 
 
            </th> 
 
            <th> 
 
             <label>DHL</label> 
 
            </th> 
 
            <th> 
 
             <label>DHL</label> 
 
            </th> 
 
            <th> 
 
             <label>Mallory</label> 
 
            </th> 
 
            <th> 
 
            </th> 
 
            <th> 
 
            </th> 
 
            <th> 
 
            </th> 
 
            <th> 
 
            </th> 
 
            <th> 
 
            </th> 
 
           </tr> 
 
           <tr> 
 
            <th> 
 
            </th> 
 
            <th> 
 
             <label>BOND</label> 
 
            </th> 
 
            <th> 
 
             <label>CQE/Non</label> 
 
            </th> 
 
            <th> 
 
             <label>Agave</label> 
 
            </th> 
 
            <th> 
 
             <label>Fees</label> 
 
            </th> 
 
            <th> 
 
            </th> 
 
            <th> 
 
            </th> 
 
            <th> 
 
            </th> 
 
            <th> 
 
            </th> 
 
           </tr> 
 
          </thead> 
 

 
          <tbody> 
 
           <tr> 
 
            <td> 
 
             <label>Entry</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td> 
 
             <label>Harbor Maintenance</label> 
 
            </td> 
 
            <td></td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <label>%</label> 
 
            </td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>ISF</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td> 
 
             <label>Merch. Processing</label> 
 
            </td> 
 
            <td></td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <label>%</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>FDA Notice</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>Express Mail</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>Disbursement</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td> 
 
             <label>Mex Honey USDA</label> 
 
            </td> 
 
            <td></td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <label>$</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>Avg 2 Customs Withdrawls</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label></label> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td> 
 
             <label>Border Whse</label> 
 
            </td> 
 
            <td></td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <label>$/PLT</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>Mexican Pre-Validation</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>Mexican Customs</label> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>US Customs</label> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>Border Drayage</label> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>Border Warehouse</label> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>Blocking & Bracing</label> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 

 
           <tr> 
 
            <td> 
 
             <label>Total</label> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td> 
 
             <input type="text" /> 
 
            </td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
            <td></td> 
 
           </tr> 
 
          </tbody> 
 
         </table>

我的要求是,我想2,3,4列应该是滚动的,因为我想额外列补充。我想知道如何做到这一点?使用表格或网格系统n bootstrap? 有什么建议吗?

表应响应也。只有3列应该可以通过额外添加的列进行滚动?

+0

所以,你需要一些列可滚动? –

+0

是的,只有三列,当我添加另一个。 –

+0

您是否还需要不可滚动的列? –

回答

-1

做出响应表作如下的结构

<div class="table-responsive"> 
    <table class="table table-striped table-bordered"> 
// rest of the code 
</table> 
</div> 
+0

我应该在哪里保留那个班{。你的班级}? –

+0

查看更新 –

+0

和谁倒票护理解释? –