From 5f4b077e2c337ed5b72c6468c77c7975f563e7b3 Mon Sep 17 00:00:00 2001
From: Lordmau5 <mail@lordmau5.com>
Date: Tue, 8 Aug 2023 14:46:10 +0200
Subject: [PATCH] Klebender Header

---
 src/pages/RechnerSeite.vue | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/pages/RechnerSeite.vue b/src/pages/RechnerSeite.vue
index 65f8fbc..fd71332 100644
--- a/src/pages/RechnerSeite.vue
+++ b/src/pages/RechnerSeite.vue
@@ -60,7 +60,8 @@
 					</q-card-section>
 
 					<q-table
-						style="height: 350px"
+						class="witzigeTabelleMitKlebendemHeader"
+						dense
 						:rows="tabellenReihen"
 						:columns="tabellenSpalten"
 						separator="cell"
@@ -177,7 +178,8 @@
 					</q-card-section>
 
 					<q-table
-						style="height: 350px"
+						class="witzigeTabelleMitKlebendemHeader"
+						dense
 						:rows="gequetschteTabellenReihen"
 						:columns="tabellenSpalten"
 						separator="cell"
@@ -227,7 +229,8 @@
 			</q-card-section>
 		
 			<q-table
-				style="height: 350px"
+				class="witzigeTabelleMitKlebendemHeader"
+				dense
 				:rows="blechGesprächZeilen"
 				:columns="blechGesprächSpalten"
 				separator="cell"
@@ -508,6 +511,20 @@ const personenAuswahlMöglichkeiten = computed(() => {
 </script>
 
 <style>
+.witzigeTabelleMitKlebendemHeader {
+	height: 400px;
+}
+
+.witzigeTabelleMitKlebendemHeader thead tr th {
+	position: sticky;
+	z-index: 1;
+}
+
+.witzigeTabelleMitKlebendemHeader thead tr:first-child th {
+	top: 0;
+	background-color: #323232;
+}
+
 .ichGehInDieDisko {
 	animation: diskoNeu v-bind(blechDiskoGeschwindigkeit) linear infinite;
 	background: linear-gradient(238deg, #7c4200, #760043, #4c007e, #001f86, #005a68, #194830);