Added sticky thead

mityaua · Jan 20, 2025 · bb33c54 · bb33c54
1 parent 1d4957e
commit bb33c54
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -40,11 +40,12 @@ const onSort = (columnName: string): void => {
 </script>
 
 <template>
-	<div class="relative shadow-md sm:rounded-lg dark:shadow-xl">
+	<div class="shadow-md sm:rounded-lg dark:shadow-xl">
 		<table class="w-full text-center text-sm text-gray-500 dark:text-gray-400">
 			<!-- Table caption -->
+
 			<caption
-				class="bg-blue-100 p-2 text-left text-lg font-semibold text-gray-900 md:rounded-t-lg dark:border dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+				class="sticky top-0 z-20 bg-blue-100 p-2 text-left text-lg font-semibold text-gray-900 md:rounded-t-lg dark:border dark:border-gray-700 dark:bg-gray-800 dark:text-white"
 			>
 				<div class="flex flex-nowrap items-center">
 					<p class="mr-2 whitespace-nowrap text-sm uppercase">List of irregular verbs</p>
@@ -57,7 +58,7 @@ const onSort = (columnName: string): void => {
 			</caption>
 
 			<!-- Table head -->
-			<thead class="text-xs uppercase text-gray-700 dark:text-gray-400">
+			<thead class="w-full text-xs uppercase text-gray-700 dark:text-gray-400">
 				<tr>
 					<TableHead
 						v-for="(value, result) in searchResults[0]"

diff --git a/src/components/TableHead.vue b/src/components/TableHead.vue
@@ -34,7 +34,7 @@ const onColumnClick = (): void => {
 </script>
 
 <template>
-	<th class="bg-gray-50 p-2 dark:bg-gray-700" width="33%" scope="col">
+	<th class="sticky z-10 bg-gray-50 p-2 dark:bg-gray-700" width="33%" scope="col">
 		<div class="flex items-center justify-center">
 			<p>{{ visibleColumnName }}</p>
 
@@ -44,3 +44,9 @@ const onColumnClick = (): void => {
 		</div>
 	</th>
 </template>
+
+<style scoped>
+th {
+	top: 86px;
+}
+</style>