悬停突出显示在 Bootstrap 4 中不起作用的表格
Hover highlight for tables not working in Bootstrap 4
我正在按照示例 Bootstrap's site 进行操作,当我添加 class table[=21 时,我发现 table 看起来不同=] 到我的 table 标签,但是当我添加 table-hover 时没有任何新的事情发生。因此,以下两行都产生相同的 L&F(none 其中突出显示了我悬停在上方的行)。
<table class="table table-hover">
<table class="table">
我可以缺少什么?
控制台中没有报告任何错误,它在链接到的页面上绝对有效,在谷歌搜索时我看不到任何信息。我依赖缩小的文件(所有四个 CSS 和一个 JS 加上 Tether)。
table-hover 的 CSS 是
.table-hover tbody tr:hover {
...some change
}
确保您的 HTML 有一个 tbody
标签:
<table class="table table-hover">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
如果您的 table 有一个 header,也可以考虑添加一个 thead
。请注意 .table-hover
不会定位 thead
.
中的行
如果您想在不更改标记的情况下影响悬停时的行,您可以尝试添加:
.table-hover tr:hover {
...some change
}
我正在按照示例 Bootstrap's site 进行操作,当我添加 class table[=21 时,我发现 table 看起来不同=] 到我的 table 标签,但是当我添加 table-hover 时没有任何新的事情发生。因此,以下两行都产生相同的 L&F(none 其中突出显示了我悬停在上方的行)。
<table class="table table-hover">
<table class="table">
我可以缺少什么?
控制台中没有报告任何错误,它在链接到的页面上绝对有效,在谷歌搜索时我看不到任何信息。我依赖缩小的文件(所有四个 CSS 和一个 JS 加上 Tether)。
table-hover 的 CSS 是
.table-hover tbody tr:hover {
...some change
}
确保您的 HTML 有一个 tbody
标签:
<table class="table table-hover">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
如果您的 table 有一个 header,也可以考虑添加一个 thead
。请注意 .table-hover
不会定位 thead
.
如果您想在不更改标记的情况下影响悬停时的行,您可以尝试添加:
.table-hover tr:hover {
...some change
}