如何在引导时固定td宽度，当表格将滚动时溢出-x

Question

如何在引导时固定td表格将在滚动时溢出-x 表格td宽度在我的表格进入滚动或列时不工作规模太大。

<div style="overflow-x: auto;" class="row show-grid"> 
    <table class="table table-bordered table-responsive"> 
    <thead> 
     <tr> 
     <th style="width: 30px">Name</th> 
     <th style="width: 30px">Total Budget</th> 
     <th style="width: 30px">Total Achievement</th> 
     <th style="width: 30px">Total Variance</th> 
     <th style="width: 30px">Last Month Target</th> 
     <th style="width: 30px">Last Month Achievement</th> 
     <th style="width: 30px">Last Month Variance</th> 
     <th style="width: 30px">Current Month Target</th> 
     <th style="width: 30px">Current Month Achievement</th> 
     <th style="width: 30px">Current Month Variance</th> 
     <th style="width: 30px">Rest Of The Month Target</th> 
     <th style="width: 30px">Next Month Target</th> 
     <th style="width: 30px">Remarks Before Meeting</th> 
     </tr> 
    </thead> 

    <tr> 
     <td>Total</td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
    </tr> 
</table> 

Answer 1

You can use table-layout: fixed, that 


<style> 
     td,th 
     { 
      width: 300px; 
     } 
</style> 
<div style="overflow-x: auto;" class="row show-grid"> 
    <table class="table table-bordered table-responsive" style="table-layout: fixed"> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Total Budget</th> 
     <th>Total Achievement</th> 
     <th>Total Variance</th> 
     <th>Last Month Target</th> 
     <th>Last Month Achievement</th> 
     <th>Last Month Variance</th> 
     <th>Current Month Target</th> 
     <th>Current Month Achievement</th> 
     <th>Current Month Variance</th> 
     <th>Rest Of The Month Target</th> 
     <th>Next Month Target</th> 
     <th>Remarks Before Meeting</th> 
     </tr> 
    </thead> 

    <tr> 
     <td>Total</td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
     <td><input type="text" class="form-control"></td> 
    </tr> 
</table>