Отзывчивая таблица не заполняет весь столбец, в который она вложена - PullRequest
Новая
       46

Отзывчивая таблица не заполняет весь столбец, в который она вложена

0 голосов
/ 09 января 2019

Я использую bootstrap 4 в приложении Angular.

В одном из html-компонентов я пытаюсь вложить адаптивную таблицу в строку сетки.

Я следовал инструкциям, чтобы вложить div "table" в другой div класса "response-table", но таблица все еще не заполняет столбец, в который она вложена.

вот мой код сетки: 

<div class="container-fluid">
    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        <h5  ng-app ng-controller="GetDate">
        {{date | date : 'dd.MM.yyyy'}}
        </h5>
      </div>
    </div>

    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        {{"Welcome "+ Name}}
        </div>
    </div>

    <div class="row">
      <div class="col col-lg-10"></div>
      <div class="col col-lg-2">
        <button type="button" class=" btn btn-dark" data-toggle="modal" data-target="#modalMonthSelect">Launch Calculation</button>
      </div>
    </div>
    <div class="row">
      <div class="col-4"></div>
      <div class="col-4">
      <div class="table-responsive" >
      <div class="table table-striped table-bordered" >
        <thead>
          <tr>
            <th>Eitan</th>
            <th>Pozen</th>
            <th>Rebbi</th>
            <th>Cohen</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>500</td>
            <td>1000</td>
            <td>1500</td>
            <td>2000</td>
          </tr>
          <tr>
            <td>500</td>
            <td>1000</td>
            <td>1500</td>
            <td>2000</td>
          </tr>
        </tbody>
    </div>
  </div>
      </div>
      <div class="col-4"></div>

    </div>

</div>

А вот и скриншот:

enter image description here

Как видите, хотя таблица вложена в "col-4", она не заполняет ее. Что я должен сделать, чтобы растянуть стол и заполнить весь столб?

1 Ответ

0 голосов
/ 10 января 2019

В вашем коде тег [div] с классом "table table-striped table-border" должен быть [table] 

<div class="table-responsive" >
    <table class="table table-striped table-bordered" >
        ...
    </table>
</div>
Попробуйте и дайте мне знать.

https://hackerthemes.com/bootstrap-cheatsheet/#table-responsive

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

...