tablehead sticky au scroll

index.php

@@ -34,6 +34,15 @@
         for (let otherTableTd of otherTableTds) {
           otherTableTd.style.width = `${100 / 8 * 1.75}%`;
         }
+        // HEADER AU SCROLL
+        let tableHead = document.querySelector("thead tr");
+        let tHeadHeight = tableHead.offsetHeight;
+        window.onscroll = () => {
+          tableHead.style.minHeight = `${document.querySelector("header").offsetHeight + 72}px`;
+          let scroll = window.pageYOffset;
+          let headerNewHeight = tHeadHeight - scroll;
+          tableHead.style.height = `${headerNewHeight}px`;
+        }
       }, false);
     </script>
 

resources/views/index.blade.php

@@ -16,7 +16,7 @@
 
   <table class="w-full bg-jlg-dark-blue flex justify-center">
     <thead>
-      <tr class="border-jlg-white h-64 top-0 w-2/3 fixed flex items-stretch justify-around text-left text-lg uppercase bg-jlg-dark-blue">
+      <tr class="border-jlg-white h-64 top-0 w-full lg:w-2/3 fixed flex items-stretch justify-around text-left lg:text-lg uppercase bg-jlg-dark-blue">
         <th class="flex items-end justify-start"></th>
         <th class="flex items-end justify-start pb-4">Images</th>
         <th class="flex items-end justify-start pb-4">Voix Off et In</th>
@@ -24,7 +24,7 @@
         <th class="flex items-end justify-start pb-4">Écrits</th>
       </tr>
     </thead>
-    <tbody class="w-2/3 block bg-jlg-dark-blue">
+    <tbody class="w-full lg:w-2/3 block bg-jlg-dark-blue">
       <?php
         $args = array(
           'post_type' => 'post',