multiple tables, fix large screen bug

scss/styles3.scss

@@ -1,20 +1,30 @@
+$even-color: #dedede;
+$thead-color: #dedede;
 
 div.table {
    display: flex;
    flex-direction: column;
+   margin-bottom: 5em;   
+   div.tr:nth-child(even) {
+      background: $even-color;
+   }
+   div.thead div.tr {
+      border-top: 1px solid grey;
+      background: $thead-color;
+      div.td {
+         justify-content: center; 
+         font-weight: bold;
+      }
+   }
    div.tr {
       display: flex;
       min-height: 50px;
-      &:nth-child(1) {
-         border-top: 1px solid grey;
-      }
-      &:nth-child(odd) {
-         background: #dedede;
-      }
       div.td {
          display: flex;
-         align-items: center;
          flex: 4;
+         align-items: center;
+         padding: 5px;
+         box-sizing: border-box;
          border: 1px solid grey;
          border-top: 0;
          border-left: 0;
@@ -26,40 +36,28 @@ div.table {
          &:nth-child(3) { flex: 6; }
          &:nth-child(4) { flex: 2; }
          &:last-child   { flex: 2; }
-         div.thead { // TODO affiché par erreur en grand écran, 
-            // car le script applique ici la l.57 du script js 
-            // commenter pour voir le problème
-            display: none;
-         }
-      }
-      &.header div.td {
-         justify-content: center; 
-         font-weight: bold;
-      }
-      div.td,
-      div.thead {
-         padding: 5px;
-         box-sizing: border-box;
       }
    }
 }
 @media only screen 
-   and (max-width: 800px) {
+   and (max-width: 800px) {      
    div.table {
       margin-right: 0.5em;
+      div.thead div.tr {
+         position: absolute;
+         top: -9999px;
+         left: -9999px;
+      }
+      div.tbody div.tr:nth-child(1) div.td:nth-child(1) {
+         border-top: 1px solid grey;
+      }
       div.tr {
          flex-direction: column;
-         padding-left: 37%;
-         &.header {
-            position: absolute;
-            top: -9999px;
-            left: -9999px;
-         }
+         padding-left: 37%;   
          div.td {
             position: relative;
             border-left: 1px solid grey;
-            div.thead { // idem l.28
-                        display: block;  
+            & > div.head { 
                position: absolute;
                top: 0;
                left: -57%;
@@ -67,25 +65,20 @@ div.table {
                padding-right: 10px;
                white-space: nowrap;
             }
-            &:nth-child(1) {
-               //border-left: 0;
-            }
-         }
-         &:nth-child(2) {
-            div.td:nth-child(1) {
-               border-top: 1px solid grey;
-            }
          }
       }
    }
    @media only screen 
       and (max-width: 450px) {
       div.table {
+         div.tbody div.tr:nth-child(1) div.td:nth-child(1) {
+            border-top: 1px solid grey;
+         }
          div.tr {
             padding-left: 0;
             div.td {
                padding-left: 1.5em;
-               &.thead {
+               &.head {
                   font-weight: bold;
                   padding-left: 0.5em;
                }