我在这里实现了Datatables中的垂直标题流:https://jsfiddle.net/2unr54zc/
我已经修复了水平滚动的列,但我发现垂直滚动时很难修复前两行,因为它们在不同的TR中是不同的TD/TH。
我该怎么做呢?请帮助我。
代码如下:
.dataTable {
display: block;
width: 100%;
}
.dataTable thead {
display: block;
position: relative;
}
.dataTable thead tr {
display: flex;
}
.dataTable thead th {
flex-grow: 1;
position: absolute;
top: 100%;
z-index: 9;
width: 140px !important;
left: 0;
height: 80px;
box-sizing: border-box;
color: #fff;
border: unset;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
background-color: #65696b;
}
.dataTable thead th:nth-child(2) {
top: calc(100% + 80px * 1);
}
.dataTable thead th:nth-child(3) {
top: calc(100% + 80px * 2);
}
.dataTable thead th:nth-child(4) {
top: calc(100% + 80px * 3);
}
.dataTable thead th:nth-child(5) {
top: calc(100% + 80px * 4);
}
.dataTable thead th:nth-child(6) {
top: calc(100% + 80px * 5);
}
.dataTable thead th:nth-child(7) {
top: calc(100% + 80px * 6);
}
.dataTable thead th:nth-child(8) {
top: calc(100% + 80px * 7);
}
.dataTable thead th:nth-child(9) {
top: calc(100% + 80px * 8);
}
.dataTable thead th:nth-child(10) {
top: calc(100% + 80px * 9);
}
.dataTable thead th:nth-child(11) {
top: calc(100% + 80px * 10);
}
.dataTable tbody {
display: flex;
width: 100%;
overflow-x: scroll;
padding-left: 140px;
min-height: calc(80px * 10 + 18px);
}
.dataTable tbody tr {
display: block;
box-sizing: border-box;
}
.dataTable tbody td {
display: block;
height: 80px;
width: 100px;
position: relative;
box-sizing: border-box;
}
.dataTable tbody td:not(:last-child)::before {
border-bottom: 1px solid #f2e7e7f5;
}
.dataTable thead th:first{
position:fixed
}
.dataTable tbody td:first{
position:fixed
}
个字符
1条答案
按热度按时间qoefvg9y1#
问题出在
th
和td
的box-sizing
中。box-sizing
值有两个来源:你的自定义css和datatables.min.css
。在
datatables.min.css
中:字符串
在自定义CSS中:
型
选择器
table.dataTable th
和.dataTable thead th
具有相同的specificity,这意味着级联中 * 较低 * 的样式将设置box-sizing
的值。在fiddle中,自定义css位于**
datatables.min.css
之后,在SO片段中,自定义css位于**datatables.min.css
之前。你需要的是
box-sizing: border-box;
,所以要么确保你的自定义css在你的代码中更低,要么让选择器更具体。在下面的例子中,我添加了
.vertical
类,使自定义css的特异性更高,所以样式的顺序无关紧要。的字符串