这里使用 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%"
但这也行不通。
谁能指出如何定义每列的固定宽度。我对水平滚动没意见。
谢谢
最佳答案
你可以给form-control类添加一个固定的宽度,它不会自动减少宽度。像这样。
.form-control {
width: 150px;
}
关于html - Bootstrap 3 : Define fixed width of column with more than 12 columns in a row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56005599/