Примеры таблиц фиксированных заголовков Angular 7 не работают - PullRequest
Новая
       41

Примеры таблиц фиксированных заголовков Angular 7 не работают

0 голосов
/ 26 февраля 2019

Я сталкиваюсь с большой проблемой с таблицами фиксированных заголовков, так как она связана с моим Angular-приложением.Используя этот этот пример (который также этот ) в качестве основы для моего вопроса, я первоначально думал, что это мой компонент, но теперь я прикрепил этот же код в свой индекс.html страницу и устранил угловое приложение от реализации.Я не должен, что я все еще использую ng serve и имею приложение и рендеринг страницы на моей локальной машине.Мой CSS включает в себя: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />
<style type="text/css">
  .table-fixed tbody {
    height: 200px; overflow-y: auto; width: 100%;
  }
  .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
  }
  .table-fixed tr:after {
    content: ""; display: block; visibility: hidden; clear: both;
  }
  .table-fixed tbody td,
  .table-fixed thead > tr > th {
    float: left;
  }
  .table > thead > tr > th,
  .table > thead > tr > td {
    font-size: .9em;
    font-weight: 400;
    border-bottom: 0;
    letter-spacing: 1px;
    vertical-align: top;
    padding: 8px;
    background: #51596a;
    text-transform: uppercase;
    color: #ffffff;
  }
</style>

И затем сразу после этого, в моем HTML, у меня есть таблица: 

    <table class="table table-fixed">
      <thead>
        <tr>
          <th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
        </tr>
        <tr>
          <td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
        </tr>
        ...
      </tbody>
    </table>

И все же, это то, что отображается:

Table is not 100% wide

Может кто-нибудь помочь мне понять, почему это может работать во множестве примеров, но когда я пытаюсь запустить его с моим угловым приложением на моей локальной машине, даже снаружиприложение, оно не работает?

ОБНОВЛЕНИЕ:

Возможно, проблема в том, что я использую Bootstrap 4, а не Bootstrap 3. По объяснению Джаллера, когда я изменил мой загрузчик на 3.3.7, он работает.К сожалению, я создаю свое приложение с Bootstrap 4. Может кто-нибудь указать мне пример, который работает с Bootstrap 4?

ОБНОВЛЕНИЕ 2:

За дополнительное редактирование Джаллерапроблема заключалась в том, что мои столбцы использовали классы col-xs- {num} для столбцов таблицы.При переключении их на классы col- {num} прокручиваемая таблица с фиксированным заголовком работает отлично!

1 Ответ

0 голосов
/ 26 февраля 2019

В примере, который вы использовали, используется начальная загрузка 3 вместо начальной загрузки 4, проверьте app.component.html в этом примере стекаблика https://stackblitz.com/edit/angular-v8mxae

там я импортировал ту же версию начальной загрузки, которая использовалась в ваших примерах codepen 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

с этой версией работает как ожидалось

* Редактировать

для использования начальной загрузки 4 просто удалите часть xs классов col-,система сетки была слегка изменена с начальной загрузки 3 на 4.

, поэтому вместо col-xs-2 используйте col-2 вместо col-xs-4 col-4 и т. д.

...