Utilizing bootstrap 3 in this particular case.
I currently have an HTML table with more than 12 rows, about 14 in total. These rows consist of various input controls such as textboxes and dropdowns. My goal is to set a fixed width for each column, for example, text would have a certain width, dropdowns another, and so on. Below is my current table design:
<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>I attempted to define the style for each TH element as follows:
<th style="width:10%">Col1</th>
The problem is that this method partially works, but once the last few columns reach the edge of the screen, their width automatically decreases even if I specified a width for them.
As a solution, I tried giving my table a width and enabling auto-scroll like so:
style="overflow-x:auto;min-width:100%"
However, this approach also proved ineffective.
Could someone provide guidance on how to establish a fixed width for each column? Horizontal scrolling is acceptable in this scenario.
Thank you