当 table 将在 overflow-x 中滚动时如何固定 bootstrap 中的 td 宽度

Question

当 table 将在 overflow-x 中滚动时如何固定 bootstrap 中的 td 宽度 Table 当我的 table 滚动或列太大时，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>

当 table 将在 overflow-x 中滚动时如何固定 bootstrap 中的 td 宽度

How to fixed td width in bootstrap when table will be scrolled in overflow-x

html-table

bootstrap-table