2017-05-10 79 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

和誰倒票護理解釋? –