我在这里的数据表中实现了垂直标题流: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
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-pageLoadMore/1.0.2/js/dataTables.pageLoadMore.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Country</th>
<th>Town</th>
<th>School</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
</tbody>
</table>
<script>
$(function() {$('#example').DataTable();});
</script>
问题出在
box-sizing
和th
的td
。
box-sizing
值有2个来源:您的自定义CSS和datatables.min.css
。
在
datatables.min.css
:
table.dataTable, table.dataTable th, table.dataTable td {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
在自定义CSS中:
.dataTable thead th {
box-sizing: border-box;
/* other properties */
}
.dataTable tbody td {
box-sizing: border-box;
/* other properties */
}
选择器
table.dataTable th
和.dataTable thead th
具有相同的特异性,这意味着级联中lower的样式设置box-sizing
的值。
在小提琴中,自定义CSS出现在after
datatables.min.css
,在SO片段中,自定义CSS出现在beforedatatables.min.css
。
您需要的是
box-sizing: border-box;
,因此请确保您的自定义CSS在代码中lower,或者使选择器更加特定。
在下面的示例中,我添加了
.vertical
类来提高自定义 css 的特异性,因此样式的顺序无关紧要。
.dataTable.vertical {
display: block;
width: 100%;
}
.dataTable.vertical thead {
display: block;
position: relative;
}
.dataTable.vertical thead tr {
display: flex;
}
.dataTable.vertical 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.vertical thead th:nth-child(2) {
top: calc(100% + 80px * 1);
}
.dataTable.vertical thead th:nth-child(3) {
top: calc(100% + 80px * 2);
}
.dataTable.vertical thead th:nth-child(4) {
top: calc(100% + 80px * 3);
}
.dataTable.vertical thead th:nth-child(5) {
top: calc(100% + 80px * 4);
}
.dataTable.vertical thead th:nth-child(6) {
top: calc(100% + 80px * 5);
}
.dataTable.vertical thead th:nth-child(7) {
top: calc(100% + 80px * 6);
}
.dataTable.vertical thead th:nth-child(8) {
top: calc(100% + 80px * 7);
}
.dataTable.vertical thead th:nth-child(9) {
top: calc(100% + 80px * 8);
}
.dataTable.vertical thead th:nth-child(10) {
top: calc(100% + 80px * 9);
}
.dataTable.vertical thead th:nth-child(11) {
top: calc(100% + 80px * 10);
}
.dataTable.vertical tbody {
display: flex;
width: 100%;
overflow-x: scroll;
padding-left: 140px;
min-height: calc(80px * 10 + 18px);
}
.dataTable.vertical tbody tr {
display: block;
box-sizing: border-box;
}
.dataTable.vertical tbody td {
display: block;
height: 80px;
width: 100px;
position: relative;
box-sizing: border-box;
}
.dataTable.vertical tbody td:not(:last-child)::before {
border-bottom: 1px solid #f2e7e7f5;
}
.dataTable.vertical thead th:first{
position:fixed
}
.dataTable.vertical tbody td:first{
position:fixed
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-pageLoadMore/1.0.2/js/dataTables.pageLoadMore.min.js"></script>
<table id="example" class="display vertical" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Country</th>
<th>Town</th>
<th>School</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
</tbody>
</table>
<script>
$(function() {$('#example').DataTable();});
</script>