当表格将在溢出-x中滚动时如何在引导程序中固定td宽度答案

【问题标题】：How to fixed td width in bootstrap when table will be scrolled in overflow-x当表格将在溢出-x中滚动时如何在引导程序中固定td宽度
【发布时间】：2017-04-05 05:52:29
【问题描述】：

当表格在 overflow-x 中滚动时，如何在引导程序中固定 td 宽度当我的表格滚动或列太大时，表格 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>

【问题讨论】：

标签： html-table bootstrap-table

【解决方案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>

【讨论】：