У меня возникла большая проблема с фиксированными таблицами заголовков, поскольку это связано с моим приложением Angular. Используя этот этот пример (который также является этот) в качестве основы для моего вопроса я изначально думал, что это был моим компонентом, но теперь я прикрепил этот же код к своей странице index.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>
И тем не менее, вот что отображается:
Может ли кто-нибудь помочь мне понять, почему это может работать в различных примерах, но когда я пытаюсь запустить его с моим угловым приложением на моей локальной машине, даже вне приложения, это не работает?
ОБНОВЛЕНИЕ:
Проблема может заключаться в том, что я использую Bootstrap 4, а не Bootstrap 3. Согласно объяснению Джаллера, когда я изменил свой бутстрап на 3.3.7, он работает. К сожалению, я создаю свое приложение с помощью Bootstrap 4. Может ли кто-нибудь указать мне пример, который работает с Bootstrap 4?
ОБНОВЛЕНИЕ 2:
Согласно дополнительному редактированию Джаллера, проблема заключалась в том, что мои столбцы использовали классы col-xs-{num} для столбцов таблицы. Переключив их на классы col-{num}, прокручиваемая таблица с фиксированным заголовком работает отлично!
