htmlcsshtml-tablehtml-tbody

HTML table header/row alignment

So much has been written about this subject in so many variations (too many?) that one does wonder why this has not been given an elegant solution in either css or HTML: a coupling between the borders of the header and the data columns (thead/tbody).

Still I am not able to get it right, apologies. What do I do wrong? What do miss? Or is it simply not possible this way and do I need javascript?

To be clear, I want the headers to align with the table data columns using CSS. So in a simple view, the 8th header field needs to be a bit wider by the width of the scroll bar. The width of the cells is now determined by the style width specifier and automatically calculated. Apparently I can't get a coupling between the tbody and the thead.

Note that the horizontal resizing of the table is handled correctly. Note also that commented out is width: calc(100% - 17px); which reflects part of my experimentation. The example is a bit elaborate to keep its original formatting which may play a role in the issue.

See jsfiddle.

.CUtable{
  border-collapse: collapse;
  border-spacing: 0;
   text-align: center;
   width: 100%;
   max-width: 1000px;
   margin: auto;
   display: block;
   table-layout: fixed;
}

.CUtable thead, .CUtable tbody { display: block; }

/*
.CUtable td:last-child{
    width:  calc(100% - 17px);
}*/

.CUtable tbody {
    height: 55vh;
    overflow: auto;
}


.CUtable td, .CUtable th {
    width: 4%;
}


.labels {
  background-color: #d0d0d0;
  border: 1px solid #b0b0b0;
  color: #222222;
  font-size: 90%;
}
.reportday {
    background-color: #f0f0f0;
    font-weight: bold;
    font-size: 85%;
}
.reportttl {
  background-color: #f0f0f0;
  border: 1px solid #b0b0b0;
  color: #222222;
  font-size: 85%;
  font-weight: bold;
}
<table class="CUtable"><thead>
<tr>
<th class="labels" colspan="8">december</th>
</tr>
<tr>
<th class="labels">Head 1</th>
<th class="labels">Head 2</th>
<th class="labels">Head 3</th>
<th class="labels">Head 4</th>
<th class="labels">Head 5</th>
<th class="labels">Head 6</th>
<th class="labels">Head 7</th>
<th class="labels">Head 8</th>
</tr>
</thead><tbody>
<tr><td class="labels">1</td>
<td class="reportttl">
<span style="color: Red">10,0 (2021)</span><br/>
<span >4,2 (2019)</span>
</td>
<td class="reportttl">
<span >4,6 (2020)</span><br/>
<span >-0,6 (2019)</span><br/>
</td>
<td class="reportttl" style="color: DeepSkyBlue">5,6 (2021)</td>
<td class="reportttl" style="color: DeepSkyBlue">5,6 (2021)</td>
<td class="reportttl" style="color: DeepSkyBlue">807,9 (2021)</td>
<td class="reportttl" style="color: MediumSeaGreen">41,6 (2021)</td>
<td class="reportttl" style="color: green">84,0 (2021)</td>
</tr>
<tr><td class="labels">2</td>
<td class="reportttl">
<span >8,7 (2019)</span><br/>
<span >4,6 (2020)</span>
</td>
<td class="reportttl">
<span >3,2 (2020)</span><br/>
<span style="color: blue">0,0 (2021)</span><br/>
</td>
<td class="reportttl" style="color: DeepSkyBlue">7,4 (2021)</td>
<td class="reportttl" style="color: DeepSkyBlue">13,0 (2021)</td>
<td class="reportttl" style="color: DeepSkyBlue">815,3 (2021)</td>
<td class="reportttl" style="color: MediumSeaGreen">19,0 (2021)</td>
<td class="reportttl" style="color: green">36,5 (2021)</td>
</tr>
<tr><td class="labels">3</td>
<td class="reportttl">
<span >8,4 (2019)</span><br/>
<span style="color: blue">4,5 (2021)</span>
</td>
<td class="reportttl">
<span >4,3 (2019)</span><br/>
<span style="color: blue">0,7 (2021)</span><br/>
</td>
<td class="reportttl" style="color: DeepSkyBlue">2,2 (2021)</td>
<td class="reportttl" style="color: DeepSkyBlue">15,2 (2021)</td>
<td class="reportttl" style="color: DeepSkyBlue">817,5 (2021)</td>
<td class="reportttl" style="color: MediumSeaGreen">32,9 (2021)</td>
<td class="reportttl" style="color: green">59,4 (2021)</td>
</tr>
<tr><td class="labels">4</td>
<td class="reportttl">
<span >7,8 (2019)</span><br/>
<span >7,6 (2020)</span>
</td>
<td class="reportttl">
<span >3,0 (2020)</span><br/>
<span >0,9 (2019)</span><br/>
</td>
<td class="reportttl" >0,4 (2020)</td>
<td class="reportttl" >3,8 (2020)</td>
<td class="reportttl" >680,2 (2020)</td>
<td class="reportttl" >9,9 (2020)</td>
<td class="reportttl" >36,2 (2020)</td>
</tr>
<tr><td class="labels">5</td>
<td class="reportttl">
<span style="color: Red">6,0 (2020)</span><br/>
<span >5,6 (2019)</span>
</td>
<td class="reportttl">
<span >-0,1 (2019)</span><br/>
<span style="color: blue">-0,6 (2020)</span><br/>
</td>
<td class="reportttl" style="color: DeepSkyBlue">4,6 (2020)</td>
<td class="reportttl" style="color: DeepSkyBlue">8,4 (2020)</td>
<td class="reportttl" style="color: DeepSkyBlue">684,8 (2020)</td>
<td class="reportttl" >14,0 (2019)</td>
<td class="reportttl" >35,4 (2019)</td>
</tr>
<tr><td class="labels">6</td>
<td class="reportttl">
<span >8,7 (2019)</span><br/>
<span style="color: blue">5,0 (2020)</span>
</td>
<td class="reportttl">
<span >5,6 (2019)</span><br/>
<span style="color: blue">-1,1 (2020)</span><br/>
</td>
<td class="reportttl" >6,4 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">11,0 (2020)</td>
<td class="reportttl" style="color: DeepSkyBlue">687,4 (2020)</td>
<td class="reportttl" >17,7 (2019)</td>
<td class="reportttl" >45,1 (2019)</td>
</tr>
<tr><td class="labels">7</td>
<td class="reportttl">
<span >10,1 (2019)</span><br/>
<span style="color: blue">6,1 (2020)</span>
</td>
<td class="reportttl">
<span >8,2 (2019)</span><br/>
<span style="color: blue">3,0 (2020)</span><br/>
</td>
<td class="reportttl" style="color: DeepSkyBlue">4,6 (2020)</td>
<td class="reportttl" style="color: DeepSkyBlue">15,6 (2020)</td>
<td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
<td class="reportttl" style="color: MediumSeaGreen">10,3 (2020)</td>
<td class="reportttl" style="color: green">36,2 (2020)</td>
</tr>
<tr><td class="labels">8</td>
<td class="reportttl">
<span >10,6 (2019)</span><br/>
<span style="color: blue">4,0 (2020)</span>
</td>
<td class="reportttl">
<span >6,3 (2019)</span><br/>
<span style="color: blue">0,7 (2020)</span><br/>
</td>
<td class="reportttl" >5,6 (2019)</td>
<td class="reportttl" >17,0 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
<td class="reportttl" >19,6 (2019)</td>
<td class="reportttl" >46,7 (2019)</td>
</tr>
<tr><td class="labels">9</td>
<td class="reportttl">
<span >7,9 (2019)</span><br/>
<span style="color: blue">3,1 (2020)</span>
</td>
<td class="reportttl">
<span >4,4 (2019)</span><br/>
<span style="color: blue">0,4 (2020)</span><br/>
</td>
<td class="reportttl" >4,0 (2019)</td>
<td class="reportttl" >21,0 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
<td class="reportttl" >26,4 (2019)</td>
<td class="reportttl" >49,9 (2019)</td>
</tr>
<tr><td class="labels">10</td>
<td class="reportttl">
<span >6,8 (2019)</span><br/>
<span style="color: blue">2,1 (2020)</span>
</td>
<td class="reportttl">
<span >2,6 (2019)</span><br/>
<span style="color: blue">0,5 (2020)</span><br/>
</td>
<td class="reportttl" >0,0 (2019)</td>
<td class="reportttl" >21,0 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
<td class="reportttl" >19,3 (2019)</td>
<td class="reportttl" >45,1 (2019)</td>
</tr>
<tr><td class="labels">11</td>
<td class="reportttl">
<span >7,2 (2019)</span><br/>
<span style="color: blue">4,0 (2020)</span>
</td>
<td class="reportttl">
<span >4,4 (2019)</span><br/>
<span style="color: blue">0,0 (2020)</span><br/>
</td>
<td class="reportttl" >2,2 (2019)</td>
<td class="reportttl" >23,2 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
<td class="reportttl" >18,0 (2019)</td>
<td class="reportttl" >37,0 (2019)</td>
</tr>
<tr><td class="labels">12</td>
<td class="reportttl">
<span >6,2 (2019)</span><br/>
<span style="color: blue">5,4 (2020)</span>
</td>
<td class="reportttl">
<span >2,8 (2019)</span><br/>
<span style="color: blue">1,9 (2020)</span><br/>
</td>
<td class="reportttl" >0,2 (2019)</td>
<td class="reportttl" >23,4 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
<td class="reportttl" >13,7 (2019)</td>
<td class="reportttl" >32,2 (2019)</td>
</tr>
<tr><td class="labels">13</td>
<td class="reportttl">
<span style="color: Red">6,0 (2020)</span><br/>
<span >4,4 (2019)</span>
</td>
<td class="reportttl">
<span style="color: Red">3,7 (2020)</span><br/>
<span >2,1 (2019)</span><br/>
</td>
<td class="reportttl" >1,0 (2019)</td>
<td class="reportttl" >24,4 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">692,2 (2020)</td>
<td class="reportttl" style="color: MediumSeaGreen">13,3 (2020)</td>
<td class="reportttl" >29,0 (2019)</td>
</tr>
<tr><td class="labels">14</td>
<td class="reportttl">
<span style="color: Red">9,4 (2020)</span><br/>
<span >7,0 (2019)</span>
</td>
<td class="reportttl">
<span style="color: Red">5,0 (2020)</span><br/>
<span >3,4 (2019)</span><br/>
</td>
<td class="reportttl" style="color: DeepSkyBlue">4,0 (2020)</td>
<td class="reportttl" >25,8 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">696,2 (2020)</td>
<td class="reportttl" style="color: MediumSeaGreen">14,5 (2020)</td>
<td class="reportttl" >40,2 (2019)</td>
</tr>
<tr><td class="labels">15</td>
<td class="reportttl">
<span style="color: Red">9,0 (2020)</span><br/>
<span >8,6 (2019)</span>
</td>
<td class="reportttl">
<span style="color: Red">7,4 (2020)</span><br/>
<span >2,8 (2019)</span><br/>
</td>
<td class="reportttl" >3,8 (2019)</td>
<td class="reportttl" >29,6 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">698,8 (2020)</td>
<td class="reportttl" >18,3 (2019)</td>
<td class="reportttl" >49,9 (2019)</td>
</tr>
<tr><td class="labels">16</td>
<td class="reportttl">
<span style="color: Red">9,7 (2020)</span><br/>
<span >8,2 (2019)</span>
</td>
<td class="reportttl">
<span style="color: Red">5,1 (2020)</span><br/>
<span >3,6 (2019)</span><br/>
</td>
<td class="reportttl" style="color: DeepSkyBlue">3,2 (2020)</td>
<td class="reportttl" >30,0 (2019)</td>
<td class="reportttl" style="color: DeepSkyBlue">702,0 (2020)</td>
<td class="reportttl" style="color: MediumSeaGreen">9,3 (2020)</td>
<td class="reportttl" style="color: green">26,2 (2020)</td>
</tr>
</tbody></table>

Solution

  • I've made some changes to the CSS, so now <th> and <td> are vertically aligned. The <thead> has been moved inwards by the size of the scrollbar. Question is the size of the table fixed, or if it will contain a lot of data, because if I reduce the number of rows, I would solve it with javascript.

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;

}

.CUtable{
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: block;
    table-layout: fixed;
    background: #d0d0d0;
  }
  
  .CUtable thead, .CUtable tbody { display: block; }
  
  
  .CUtable tbody {
      height: 55vh;
      overflow: auto;
  }
  
  .CUtable td, .CUtable th {
      width: 4%;
  }
  
  thead {
    display: table; 
    width: calc(100% - 17px);
  }
  
  th, td {
    width: 33.33%; 
    padding: 5px;
    word-break: break-all;
  }
  
  .labels {
    background-color: #d0d0d0;
    border: 1px solid #b0b0b0;
    color: #222222;
    font-size: 90%;
  }
  .reportday {
      background-color: #f0f0f0;
      font-weight: bold;
      font-size: 85%;
  }
  .reportttl {
    background-color: #f0f0f0;
    border: 1px solid #b0b0b0;
    color: #222222;
    font-size: 85%;
    font-weight: bold;
  }
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <table class="CUtable">
      <thead>
        <tr>
          <th class="labels" colspan="8">december</th>
        </tr>
        <tr class="head-row">
          <th class="labels">Head 1</th>
          <th class="labels">Head 2</th>
          <th class="labels">Head 3</th>
          <th class="labels">Head 4</th>
          <th class="labels">Head 5</th>
          <th class="labels">Head 6</th>
          <th class="labels">Head 7</th>
          <th class="labels">Head 8</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="labels">1</td>
          <td class="reportttl">
            <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
          </td>
          <td class="reportttl">
            <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
          </td>
          <td class="reportttl" style="color: DeepSkyBlue">5,6 (2021)</td>
          <td class="reportttl" style="color: DeepSkyBlue">5,6 (2021)</td>
          <td class="reportttl" style="color: DeepSkyBlue">807,9 (2021)</td>
          <td class="reportttl" style="color: MediumSeaGreen">41,6 (2021)</td>
          <td class="reportttl" style="color: green">84,0 (2021)</td>
        </tr>
        <tr>
          <td class="labels">2</td>
          <td class="reportttl">
            <span>8,7 (2019)</span><br />
            <span>4,6 (2020)</span>
          </td>
          <td class="reportttl">
            <span>3,2 (2020)</span><br />
            <span style="color: blue">0,0 (2021)</span><br />
          </td>
          <td class="reportttl" style="color: DeepSkyBlue">7,4 (2021)</td>
          <td class="reportttl" style="color: DeepSkyBlue">13,0 (2021)</td>
          <td class="reportttl" style="color: DeepSkyBlue">815,3 (2021)</td>
          <td class="reportttl" style="color: MediumSeaGreen">19,0 (2021)</td>
          <td class="reportttl" style="color: green">36,5 (2021)</td>
        </tr>
        <tr>
          <td class="labels">3</td>
          <td class="reportttl">
            <span>8,4 (2019)</span><br />
            <span style="color: blue">4,5 (2021)</span>
          </td>
          <td class="reportttl">
            <span>4,3 (2019)</span><br />
            <span style="color: blue">0,7 (2021)</span><br />
          </td>
          <td class="reportttl" style="color: DeepSkyBlue">2,2 (2021)</td>
          <td class="reportttl" style="color: DeepSkyBlue">15,2 (2021)</td>
          <td class="reportttl" style="color: DeepSkyBlue">817,5 (2021)</td>
          <td class="reportttl" style="color: MediumSeaGreen">32,9 (2021)</td>
          <td class="reportttl" style="color: green">59,4 (2021)</td>
        </tr>
        <tr>
          <td class="labels">4</td>
          <td class="reportttl">
            <span>7,8 (2019)</span><br />
            <span>7,6 (2020)</span>
          </td>
          <td class="reportttl">
            <span>3,0 (2020)</span><br />
            <span>0,9 (2019)</span><br />
          </td>
          <td class="reportttl">0,4 (2020)</td>
          <td class="reportttl">3,8 (2020)</td>
          <td class="reportttl">680,2 (2020)</td>
          <td class="reportttl">9,9 (2020)</td>
          <td class="reportttl">36,2 (2020)</td>
        </tr>
        <tr>
          <td class="labels">5</td>
          <td class="reportttl">
            <span style="color: Red">6,0 (2020)</span><br />
            <span>5,6 (2019)</span>
          </td>
          <td class="reportttl">
            <span>-0,1 (2019)</span><br />
            <span style="color: blue">-0,6 (2020)</span><br />
          </td>
          <td class="reportttl" style="color: DeepSkyBlue">4,6 (2020)</td>
          <td class="reportttl" style="color: DeepSkyBlue">8,4 (2020)</td>
          <td class="reportttl" style="color: DeepSkyBlue">684,8 (2020)</td>
          <td class="reportttl">14,0 (2019)</td>
          <td class="reportttl">35,4 (2019)</td>
        </tr>
        <tr>
          <td class="labels">6</td>
          <td class="reportttl">
            <span>8,7 (2019)</span><br />
            <span style="color: blue">5,0 (2020)</span>
          </td>
          <td class="reportttl">
            <span>5,6 (2019)</span><br />
            <span style="color: blue">-1,1 (2020)</span><br />
          </td>
          <td class="reportttl">6,4 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">11,0 (2020)</td>
          <td class="reportttl" style="color: DeepSkyBlue">687,4 (2020)</td>
          <td class="reportttl">17,7 (2019)</td>
          <td class="reportttl">45,1 (2019)</td>
        </tr>
        <tr>
          <td class="labels">7</td>
          <td class="reportttl">
            <span>10,1 (2019)</span><br />
            <span style="color: blue">6,1 (2020)</span>
          </td>
          <td class="reportttl">
            <span>8,2 (2019)</span><br />
            <span style="color: blue">3,0 (2020)</span><br />
          </td>
          <td class="reportttl" style="color: DeepSkyBlue">4,6 (2020)</td>
          <td class="reportttl" style="color: DeepSkyBlue">15,6 (2020)</td>
          <td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
          <td class="reportttl" style="color: MediumSeaGreen">10,3 (2020)</td>
          <td class="reportttl" style="color: green">36,2 (2020)</td>
        </tr>
        <tr>
          <td class="labels">8</td>
          <td class="reportttl">
            <span>10,6 (2019)</span><br />
            <span style="color: blue">4,0 (2020)</span>
          </td>
          <td class="reportttl">
            <span>6,3 (2019)</span><br />
            <span style="color: blue">0,7 (2020)</span><br />
          </td>
          <td class="reportttl">5,6 (2019)</td>
          <td class="reportttl">17,0 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
          <td class="reportttl">19,6 (2019)</td>
          <td class="reportttl">46,7 (2019)</td>
        </tr>
        <tr>
          <td class="labels">9</td>
          <td class="reportttl">
            <span>7,9 (2019)</span><br />
            <span style="color: blue">3,1 (2020)</span>
          </td>
          <td class="reportttl">
            <span>4,4 (2019)</span><br />
            <span style="color: blue">0,4 (2020)</span><br />
          </td>
          <td class="reportttl">4,0 (2019)</td>
          <td class="reportttl">21,0 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
          <td class="reportttl">26,4 (2019)</td>
          <td class="reportttl">49,9 (2019)</td>
        </tr>
        <tr>
          <td class="labels">10</td>
          <td class="reportttl">
            <span>6,8 (2019)</span><br />
            <span style="color: blue">2,1 (2020)</span>
          </td>
          <td class="reportttl">
            <span>2,6 (2019)</span><br />
            <span style="color: blue">0,5 (2020)</span><br />
          </td>
          <td class="reportttl">0,0 (2019)</td>
          <td class="reportttl">21,0 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
          <td class="reportttl">19,3 (2019)</td>
          <td class="reportttl">45,1 (2019)</td>
        </tr>
        <tr>
          <td class="labels">11</td>
          <td class="reportttl">
            <span>7,2 (2019)</span><br />
            <span style="color: blue">4,0 (2020)</span>
          </td>
          <td class="reportttl">
            <span>4,4 (2019)</span><br />
            <span style="color: blue">0,0 (2020)</span><br />
          </td>
          <td class="reportttl">2,2 (2019)</td>
          <td class="reportttl">23,2 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
          <td class="reportttl">18,0 (2019)</td>
          <td class="reportttl">37,0 (2019)</td>
        </tr>
        <tr>
          <td class="labels">12</td>
          <td class="reportttl">
            <span>6,2 (2019)</span><br />
            <span style="color: blue">5,4 (2020)</span>
          </td>
          <td class="reportttl">
            <span>2,8 (2019)</span><br />
            <span style="color: blue">1,9 (2020)</span><br />
          </td>
          <td class="reportttl">0,2 (2019)</td>
          <td class="reportttl">23,4 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">692,0 (2020)</td>
          <td class="reportttl">13,7 (2019)</td>
          <td class="reportttl">32,2 (2019)</td>
        </tr>
        <tr>
          <td class="labels">13</td>
          <td class="reportttl">
            <span style="color: Red">6,0 (2020)</span><br />
            <span>4,4 (2019)</span>
          </td>
          <td class="reportttl">
            <span style="color: Red">3,7 (2020)</span><br />
            <span>2,1 (2019)</span><br />
          </td>
          <td class="reportttl">1,0 (2019)</td>
          <td class="reportttl">24,4 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">692,2 (2020)</td>
          <td class="reportttl" style="color: MediumSeaGreen">13,3 (2020)</td>
          <td class="reportttl">29,0 (2019)</td>
        </tr>
        <tr>
          <td class="labels">14</td>
          <td class="reportttl">
            <span style="color: Red">9,4 (2020)</span><br />
            <span>7,0 (2019)</span>
          </td>
          <td class="reportttl">
            <span style="color: Red">5,0 (2020)</span><br />
            <span>3,4 (2019)</span><br />
          </td>
          <td class="reportttl" style="color: DeepSkyBlue">4,0 (2020)</td>
          <td class="reportttl">25,8 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">696,2 (2020)</td>
          <td class="reportttl" style="color: MediumSeaGreen">14,5 (2020)</td>
          <td class="reportttl">40,2 (2019)</td>
        </tr>
        <tr>
          <td class="labels">15</td>
          <td class="reportttl">
            <span style="color: Red">9,0 (2020)</span><br />
            <span>8,6 (2019)</span>
          </td>
          <td class="reportttl">
            <span style="color: Red">7,4 (2020)</span><br />
            <span>2,8 (2019)</span><br />
          </td>
          <td class="reportttl">3,8 (2019)</td>
          <td class="reportttl">29,6 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">698,8 (2020)</td>
          <td class="reportttl">18,3 (2019)</td>
          <td class="reportttl">49,9 (2019)</td>
        </tr>
        <tr>
          <td class="labels">16</td>
          <td class="reportttl">
            <span style="color: Red">9,7 (2020)</span><br />
            <span>8,2 (2019)</span>
          </td>
          <td class="reportttl">
            <span style="color: Red">5,1 (2020)</span><br />
            <span>3,6 (2019)</span><br />
          </td>
          <td class="reportttl" style="color: DeepSkyBlue">3,2 (2020)</td>
          <td class="reportttl">30,0 (2019)</td>
          <td class="reportttl" style="color: DeepSkyBlue">702,0 (2020)</td>
          <td class="reportttl" style="color: MediumSeaGreen">9,3 (2020)</td>
          <td class="reportttl" style="color: green">26,2 (2020)</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

    P.S. Have you tried Bootsrap? They've solved the mystery here.

    https://i.sstatic.net/a9Yem.jpg

    Another solution with Bootsrtap

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Document</title>
    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        table {
            border: 1px solid black;
        }

        td, th {
            text-align: center;
            border: 1px solid #b0b0b0;
        }

    </style>
</head>
<body>
    <div class="table-responsive" style="max-height: 215px;">
        <table style="width: 900px" class="table">
        <thead style="position: sticky; top:0; z-index: 1; background: #d0d0d0; ">
            <tr>
                <th style="text-align: center; border: 1px solid #b0b0b0;" colspan="8">december</th>
            </tr>
          <tr>
            <th scope="col">Head 1</th>
            <th scope="col">Head 2</th>
            <th scope="col">Head 3</th>
            <th scope="col">Head 4</th>
            <th scope="col">Head 5</th>
            <th scope="col">Head 6</th>
            <th scope="col">Head 7</th>
            <th scope="col">Head 8</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th style="background: #d0d0d0;" scope="row">1</th>
            <td>
                <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
            </td>
            <td>
                <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
            </td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">807,9 (2021)</td>
            <td style="color: MediumSeaGreen">41,6 (2021)</td>
            <td style="color: Green">84,0 (2021)</td>
          </tr>
          <tr>
            <th style="background: #d0d0d0;" scope="row">1</th>
            <td>
                <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
            </td>
            <td>
                <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
            </td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">807,9 (2021)</td>
            <td style="color: MediumSeaGreen">41,6 (2021)</td>
            <td style="color: Green">84,0 (2021)</td>
          </tr>
          <tr>
            <th style="background: #d0d0d0;" scope="row">1</th>
            <td>
                <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
            </td>
            <td>
                <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
            </td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">807,9 (2021)</td>
            <td style="color: MediumSeaGreen">41,6 (2021)</td>
            <td style="color: Green">84,0 (2021)</td>
          </tr>
          <tr>
            <th style="background: #d0d0d0;" scope="row">1</th>
            <td>
                <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
            </td>
            <td>
                <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
            </td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">807,9 (2021)</td>
            <td style="color: MediumSeaGreen">41,6 (2021)</td>
            <td style="color: Green">84,0 (2021)</td>
          </tr>
          <tr>
            <th style="background: #d0d0d0;" scope="row">1</th>
            <td>
                <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
            </td>
            <td>
                <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
            </td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">807,9 (2021)</td>
            <td style="color: MediumSeaGreen">41,6 (2021)</td>
            <td style="color: Green">84,0 (2021)</td>
          </tr>
          <tr>
            <th style="background: #d0d0d0;" scope="row">1</th>
            <td>
                <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
            </td>
            <td>
                <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
            </td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">807,9 (2021)</td>
            <td style="color: MediumSeaGreen">41,6 (2021)</td>
            <td style="color: Green">84,0 (2021)</td>
          </tr>
          <tr>
            <th style="background: #d0d0d0;" scope="row">1</th>
            <td>
                <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
            </td>
            <td>
                <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
            </td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">807,9 (2021)</td>
            <td style="color: MediumSeaGreen">41,6 (2021)</td>
            <td style="color: Green">84,0 (2021)</td>
          </tr>
          <tr>
            <th style="background: #d0d0d0;" scope="row">1</th>
            <td>
                <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
            </td>
            <td>
                <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
            </td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">807,9 (2021)</td>
            <td style="color: MediumSeaGreen">41,6 (2021)</td>
            <td style="color: Green">84,0 (2021)</td>
          </tr>
          <tr>
            <th style="background: #d0d0d0;" scope="row">1</th>
            <td>
                <span style="color: Red">10,0 (2021)</span><br />
            <span>4,2 (2019)</span>
            </td>
            <td>
                <span>4,6 (2020)</span><br />
            <span>-0,6 (2019)</span><br />
            </td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">5,6 (2021)</td>
            <td style="color: DeepSkyBlue">807,9 (2021)</td>
            <td style="color: MediumSeaGreen">41,6 (2021)</td>
            <td style="color: Green">84,0 (2021)</td>
          </tr>
        </tbody>
      </table>
    </div>
    
</body>
</html>