bb160cc503
- Drops floatthead and additional scrollbar - Makes header and first column sticky - Refactors code for readability Sticky header is only working in Firefox. Chrome and Edge does not support `position: sticky` for `<thead>`. Haven't tested Safari.
47 lines
913 B
SCSS
47 lines
913 B
SCSS
#poll {
|
|
.participants-table {
|
|
max-height: 95vh;
|
|
width: 100%;
|
|
overflow: scroll;
|
|
|
|
table {
|
|
overflow: scroll;
|
|
|
|
th, td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
thead {
|
|
// position sticky on thead is not supported by Chrome and Edge
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
background-color: #fff;
|
|
|
|
tr {
|
|
&:not(:last-child) th:not([rowspan="2"]) {
|
|
// do not show a border between rows of a multi-row header
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
thead,
|
|
tbody {
|
|
tr {
|
|
th,
|
|
td {
|
|
&:first-child {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 200;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|