adam/aprsNotifyJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make the table header sticky, so that it can be read when scrolled

Browse Source
This commit is contained in:
Adam Goldsmith 2019-07-13 08:20:20 -04:00
parent 25fd458935
commit 93a2afc4ad
1 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/StatusScreen.vue
View File

@ -120,4 +120,34 @@ table th {
border: 1px solid black; border: 1px solid black;
padding: 2px; padding: 2px;
} }
table th {
background: white;
position: sticky;
top: 0px;
}
/* border magic for sticky header */
/* https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element */
th::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
border-right: 1px solid black;
display: block;
top: 1px;
}
th::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
border-bottom: 1px solid black;
border-top: 1px solid black;
display: block;
top: -1px;
}
</style> </style>