Как создать горизонтальную полосу прокрутки для таблицы начальной загрузки - PullRequest
0 голосов
/ 03 марта 2019

У меня есть следующая таблица с 12 столбцами: Table with 12 columns

Я хочу добавить горизонтальную полосу прокрутки и увеличить ширину столбцов.Некоторые столбцы требуют ввода больших значений, поэтому я не хочу, чтобы они сжимались.

Код:

  <div class="container">
    <div class="row">
      <div class="col-md-12">   
        <div class="table-responsive">
          <table class="table table-striped table-bordered table-condensed">
            <thead>
              <tr>
                <th scope="col" class="col-lg-1"></th>
                <th scope="col" class="col-lg-3">DBID</th>
                <th scope="col" class="col-lg-3">LDAP</th>
                <th scope="col">Zuora</th>
                <th scope="col">FirstName</th>
                <th scope="col">LastName</th>
                <th scope="col">PrimaryEmail</th>
                <th scope="col">SecondaryEmail</th>
                <th scope="col">PayType</th>
                <th scope="col">Status</th>
                <th scope="col">InstanceType</th>
                <th scope="col">MaxActiveConn</th>
                <th scope="col">AuthTokenLimit</th>
              </tr>
            </thead>
            <tr ng-repeat="eachUser in Users">
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
              <td> <input required type="text"></td>
            </tbody>
          </table>
        </div>
      </div>

1 Ответ

0 голосов
/ 03 марта 2019

Вы должны добавить класс .table-responsive к тегу <table>.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...