Fix thead not sticking properly in chromium-based browsers, restore scroll-sync

This commit is contained in:
Chris Wilson
2020-07-25 17:24:23 -04:00
parent 5cd5223ae0
commit 1d22c7fb97
4 changed files with 69 additions and 13 deletions

View File

@@ -14,6 +14,10 @@ table.dataTable, table.dataTable.no-footer{
text-align: left;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{
background-image: none;
}
table.dataTable thead{
background-color: #b0a77d;
}
@@ -26,3 +30,7 @@ table.dataTable thead tr th{
table.dataTable tbody tr{
background-color: inherit;
}
table.dataTable tbody tr:hover{
background-color: #e2eabb;
}

View File

@@ -12,21 +12,23 @@
max-height: 425px;
}
#tracker-header-bar{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#search{
width: 200px;
height: 20px;
margin-bottom: 0.5rem;
}
.table-wrapper table tbody tr:hover{
background-color: #e2eabb;
}
div.dataTables_wrapper.no-footer .dataTables_scrollBody{
border: none;
}
table.dataTable tbody th, table.dataTable tbody td{
table.dataTable tbody td{
padding: 4px 6px;
}
@@ -36,13 +38,27 @@ table.dataTable, table.dataTable.no-footer{
font-size: 1rem;
}
table.dataTable thead{
table.dataTable thead th{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
top: 0;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{
background-image: none;
table.dataTable thead th.upper-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 36px;
top: 0;
}
table.dataTable thead th.lower-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 22px;
top: 46px;
}
table.dataTable tbody td{
@@ -68,6 +84,22 @@ img.alttp-sprite {
}
@media all and (max-width: 1700px) {
table.dataTable thead th.upper-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 27px;
top: 0;
}
table.dataTable thead th.lower-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 20px;
top: 37px;
}
table.dataTable, table.dataTable.no-footer{
font-size: 0.8rem;
}
@@ -80,6 +112,22 @@ img.alttp-sprite {
}
@media all and (max-width: 1400px) {
table.dataTable thead th.upper-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 22px;
top: 0;
}
table.dataTable thead th.lower-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 19px;
top: 32px;
}
table.dataTable, table.dataTable.no-footer{
font-size: 0.6rem;
}

View File

@@ -40,7 +40,7 @@ window.addEventListener('load', () => {
window.addEventListener('resize', () => tables.draw());
$(".dataTables_scrollBody").scrollsync({
$(".table-wrapper").scrollsync({
y_sync: true,
x_sync: true
});