Question

在这里使用引导程序3。

我有html表，其中有12行以上，约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 {
 width: 150px;
}

Bootstrap3：定义列的固定宽度，且行的宽度超过12列

1 个答案: