Bootstrap3: определение фиксированной ширины столбца с более чем 12 столбцами в строке - PullRequest
Новая
       7

Bootstrap3: определение фиксированной ширины столбца с более чем 12 столбцами в строке

0 голосов
/ 06 мая 2019

Здесь используется начальная загрузка 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%"

Но это также неработа.

Может кто-нибудь указать, как определить фиксированную ширину каждого столбца.Я в порядке с горизонтальной прокруткой.

Спасибо

1 Ответ

0 голосов
/ 06 мая 2019

Вы можете добавить фиксированную ширину к классу управления формой, она не будет автоматически уменьшать ширину. как это. 

.form-control {
 width: 150px;
}
...