Responsive Tabelle mit fester Kopfzeile

Question

Ich möchte eine reaktionsschnelle Tabelle erstellen, die 2 Abschnitte pro Zeit, die Beschriftungen und die Werte zeigt.

Die Bezeichnungen würden behoben werden und die Daten würden ein Schieberegler sein.

Bisher habe ich dies:

[class^=col] { 
 
    float: left; 
 
} 
 
.row { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.frame { 
 
    overflow: scroll; 
 
} 
 
.col-6 { 
 
    width: 50%; 
 
} 
 
.col-12 { 
 
    width: 100%; 
 
} 
 
.sub-row { 
 
    border: 1px solid; 
 
    height: 30px; 
 
} 
 
.sub-row:first-child { 
 
    font-weight: bold; 
 
}

<div class="row"> 
 
    <div class="col-6"> 
 
    <div class="sub-row"></div> 
 
    <div class="sub-row">Test1</div> 
 
    <div class="sub-row">Test2</div> 
 
    </div> 
 
    <div class="col-6"> 
 
    <div class="col-12"> 
 
     <div class="sub-row">Col1</div> 
 
     <div class="sub-row">bla</div> 
 
     <div class="sub-row">bla</div> 
 
    </div> 
 
    <div class="col-12"> 
 
     <div class="sub-row">Col2</div> 
 
     <div class="sub-row">bla</div> 
 
     <div class="sub-row">bla</div> 
 
    </div> 
 
    </div> 
 
</div>

aber feststellen, dass die Daten angezeigt werden, wird ein untereinander. Ich möchte, dass es nebeneinander angezeigt wird, versteckt im Panel, damit ich es verschieben kann. Wie kann ich das machen?