responsive-table-fluxbox/scss/styles3.scss

$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;
      div.td {
         display: flex;
         flex: 4;
         align-items: center;
         padding: 5px;
         box-sizing: border-box;
         border: 1px solid grey;
         border-top: 0;
         border-left: 0;
         &:nth-child(1) {
            border-left: 1px solid grey;
         }
         &:nth-child(1) { flex: 1; } 
         &:nth-child(2) { flex: 4; }
         &:nth-child(3) { flex: 6; }
         &:nth-child(4) { flex: 2; }
         &:last-child   { flex: 2; }
      }
   }
}
@media only screen 
   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%;   
         div.td {
            position: relative;
            border-left: 1px solid grey;
            & > div.head { 
               position: absolute;
               top: 0;
               left: -57%;
               width: 52%;
               padding-right: 10px;
               white-space: nowrap;
            }
         }
      }
   }
   @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;
               &.head {
                  font-weight: bold;
                  padding-left: 0.5em;
               }
            }
         }
      }
   }
}