html - Bootstrap 3 : Define fixed width of column with more than 12 columns in a row

Question

这里使用 bootstrap 3。

我有超过 12 行的 html 表，大约 14 行。这些行基本上是输入控件，如文本框、下拉列表等。我想定义每列的固定宽度。说一些宽度的文本，一些宽度的文本等。我​​设计的表格如下:

    <table class="table table-bordered" style="">
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
          <th>Col5</th>
          <th>Col6</th>
          <th>Col7</th>
          <th>Col8</th>
          <th>Col9</th>
          <th>Col10</th>
          <th>Col12</th>
          <th>Col13</th>
          <th>Col14</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="c in data">
          <td>{{c.name}}</td>
          <td>
            <select name="" class="form-control" ng-model="">
                            <option value="">--Select--</option>
                            <option ng-repeat=""></option>
                        </select>
          </td>
          <td>
            <select name="" class="form-control" ng-model="">
                            <option ng-repeat=""></option>
                        </select>
          </td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
          <td><input type="text" name="" ng-model="" class="form-control" /></td>
        </tr>
      </tbody>
    </table>

我尝试将每个 TH 的样式定义为:

 <th style="width:10%">Col1</th>

问题是这在某种程度上有效，但一旦最后几列到达屏幕末尾，即使我为它们定义了宽度，这些列的宽度也会自动减小。

然后我将表格宽度和自动滚动设置为:

style="overflow-x:auto;min-width:100%"

但这也行不通。

谁能指出如何定义每列的固定宽度。我对水平滚动没意见。

谢谢

Answer 1

你可以给form-control类添加一个固定的宽度，它不会自动减少宽度。像这样。

.form-control {
 width: 150px;
}