From 93a2afc4ad99cd4a15054d9dcf48f39ef6a78af3 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Sat, 13 Jul 2019 08:20:20 -0400
Subject: [PATCH] Make the table header sticky, so that it can be read when
 scrolled

---
 src/StatusScreen.vue | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/StatusScreen.vue b/src/StatusScreen.vue
index d2456ce..7c86b30 100644
--- a/src/StatusScreen.vue
+++ b/src/StatusScreen.vue
@@ -120,4 +120,34 @@ table th {
   border: 1px solid black;
   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>