我花了一天多的时间想出一些非常简单的东西。我有一个网站,我使用大约 10 个表。我只希望这 10 个表中的 1 个具有固定标题和滚动条。
网上找了一个很好的例子,修改了一下。我能够拥有一个带有固定标题和可滚动条的表格。
新的 CSS
.table-fixed tbody {
display:block;
max-height:625px;
overflow-y: auto;
}
.table-fixed thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed thead {
width: calc( 100% - 1em )
}
我将 table-fixed 类添加到我的表定义中并且它起作用了。
<table class = "table table-bordered table-hover table-striped table-condensed table-fixed">
问题是,如果我不把 table-fixed 包括在其他表中,其他 9 个表都搞砸了。例如:
没有表固定类添加到其他表
<table class = "table table-bordered table-hover table-striped table-condensed">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle;">something</th>
<th style="text-align: center; vertical-align: middle;">something</th>
<th style="text-align: center; vertical-align: middle;">something</th>
<th style="text-align: center; vertical-align: middle;">something</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle;">something</td>
<td style="text-align: center; vertical-align: middle;">something</td>
<td style="text-align: center; vertical-align: middle;">something</td>
<td style="text-align: center; vertical-align: middle;">something</td>
</tr>
<tbody>
</table>
我该如何解决这个问题?我希望对 CSS 的更改只影响 1 个表。我的表固定类有效,但看起来我正在修改它全局影响它的 tbody。有办法解决这个问题吗?
最佳答案
归功于 sringland。
我修改了原代码:
.table-fixed tbody {
display:block;
max-height:625px;
overflow-y: auto;
}
.table-fixed thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed thead {
width: calc( 100% - 1em )
}
对此:
.table-fixed > tbody {
display:block;
max-height:625px;
overflow-y: auto;
}
.table-fixed > thead {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed > tbody > tr {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed > thead {
width: calc( 100% - 1em )
}
通过添加 >
仅影响直接子级并分解 thead, tbody tr {
定义解决了这个问题,因为它影响了 表
类。
关于html - 如何在不影响 Bootstrap 中的其他表的情况下使 1 个表可滚动并带有固定标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39166900/