Angular 7 已修复 Header Table 示例不起作用
Angular 7 Fixed Header Table Examples Not Working
我 运行 遇到了一个大问题,固定的 header table 与我的 Angular 应用程序有关。使用此 this example (which is also this one) 作为我的问题的基础,我最初认为它是我的组件,但现在,我将相同的代码附加到我的 index.html 页面并从中删除了 angular 应用程序正在实施。我不应该认为我仍在使用 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:
<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>
然而,这是显示的内容:
有人可以帮助我理解为什么这可以在各种示例中工作,但是当我尝试 运行 它与我的本地计算机上的 angular 应用程序一起使用时,即使在应用程序之外,它不起作用?
更新:
问题可能是因为我使用的是 Bootstrap 4 而不是 Bootstrap 3。根据 jahller 的解释,当我将 bootstrap 更改为 3.3.7 时,有用。不幸的是,我正在使用 Bootstrap 4 构建我的应用程序。任何人都可以指出一个适用于 Bootstrap 4 的示例吗?
更新 2:
根据 jahller 的额外编辑,问题是我的专栏使用 col-xs-{num} 类 作为 table 专栏。通过将它们切换为 col-{num} 类,具有固定 header 的可滚动 table 可以完美地工作!
您使用的示例使用的是 bootstrap 3 而不是 bootstrap 4
检查此 stackblitz 示例中的 app.component.html
https://stackblitz.com/edit/angular-v8mxae
我导入了与您的示例代码笔中使用的相同 bootstrap 版本
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
这个版本可以正常工作
*编辑
为了使用 bootstrap 4 只需删除 col-
类 的 xs
部分。
网格系统从 bootstrap 3 略微更改为 4。
所以不要使用 col-xs-2
,而是使用 col-2
,而不是 col-xs-4
col-4
,等等
我 运行 遇到了一个大问题,固定的 header table 与我的 Angular 应用程序有关。使用此 this example (which is also this one) 作为我的问题的基础,我最初认为它是我的组件,但现在,我将相同的代码附加到我的 index.html 页面并从中删除了 angular 应用程序正在实施。我不应该认为我仍在使用 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:
<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>
然而,这是显示的内容:
有人可以帮助我理解为什么这可以在各种示例中工作,但是当我尝试 运行 它与我的本地计算机上的 angular 应用程序一起使用时,即使在应用程序之外,它不起作用?
更新:
问题可能是因为我使用的是 Bootstrap 4 而不是 Bootstrap 3。根据 jahller 的解释,当我将 bootstrap 更改为 3.3.7 时,有用。不幸的是,我正在使用 Bootstrap 4 构建我的应用程序。任何人都可以指出一个适用于 Bootstrap 4 的示例吗?
更新 2:
根据 jahller 的额外编辑,问题是我的专栏使用 col-xs-{num} 类 作为 table 专栏。通过将它们切换为 col-{num} 类,具有固定 header 的可滚动 table 可以完美地工作!
您使用的示例使用的是 bootstrap 3 而不是 bootstrap 4
检查此 stackblitz 示例中的 app.component.html
https://stackblitz.com/edit/angular-v8mxae
我导入了与您的示例代码笔中使用的相同 bootstrap 版本
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
这个版本可以正常工作
*编辑
为了使用 bootstrap 4 只需删除 col-
类 的 xs
部分。
网格系统从 bootstrap 3 略微更改为 4。
所以不要使用 col-xs-2
,而是使用 col-2
,而不是 col-xs-4
col-4
,等等