div.table {
   display: flex;
   flex-direction: column;
   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;
         border: 1px solid grey;
         border-top: 0;
         border-left: 0;
         &:nth-child(1) {
            border-left: 1px solid grey;
         }
         &:nth-child(1) { flex: 1; }  // les largeurs de colonnes
         &:nth-child(2) { flex: 4; }
         &: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) {
   div.table {
      margin-right: 0.5em;
      div.tr {
         flex-direction: column;
         padding-left: 37%;
         &.header {
            position: absolute;
            top: -9999px;
            left: -9999px;
         }
         div.td {
            position: relative;
            border-left: 1px solid grey;
            div.thead { // idem l.28
                        display: block;  
               position: absolute;
               top: 0;
               left: -57%;
               width: 52%;
               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.tr {
            padding-left: 0;
            div.td {
               padding-left: 1.5em;
               &.thead {
                  font-weight: bold;
                  padding-left: 0.5em;
               }
            }
         }
      }
   }
}