HTML table header/row alignment

Question

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>

Attila Fánczi · Accepted Answer · 2021-12-06T16:50:50.637

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.stack.imgur.com/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>

Hi, thanks for the reply. And indeed it works. But if I do its as e.g .CUtable th, it fails. While all that I do then, is saying all th within a .CUtable class isn't it. So where the difference? — Hans Rottier, Dec 04 '21 at 13:13
In addition I do not understand ` th, td { width: 33.33%; padding: 5px; word-break: break-all; }` nor do I understand why the thead has display: table; — Hans Rottier, Dec 04 '21 at 13:29
If I understand the solution well, is that you say it can only be done by approximation (some padding, some percentage, some display changes etc...). So it is solving a puzzle iso algorithm. That would point to javascript for a true solution (the real table will show 30/31 rows of which 10 are shown (hence the overflow scrollbar). — Hans Rottier, Dec 04 '21 at 13:44
Yes, if the scrollbar is eliminated because the data is reduced to e.g. less than 10 rows, the `` will take the maximum size of the ``. To do this, I would use javascript to monitor the overflow of the table and adjust the current CSS to that. — Attila Fánczi, Dec 04 '21 at 14:05
Anyway, it's a mystery to me too why CSS behaves differently in the way you suggest. I noticed that you can add, separately the `display: table` property to `` and `` while you can set also `.CUtable thead, .CUtable tbody {display: block;}`. This is also kind a mystery. — Attila Fánczi, Dec 04 '21 at 14:20
Yes, I understand that when the scroll bar is eliminated the problem disappears, but I have this problem because I want the scroll bar :D The mysterious ways are also the reason why I will not take this as the solution: too easy to break. Nevertheless: thanks very much, I learned something . I may turn to javascript if no better solution comes across. — Hans Rottier, Dec 04 '21 at 15:16
I understand! I'm sorry I couldn't give you a concrete solution, but I've also delved a little into the mysterious world of tables. :D Anyway, I just added a picture to my post. Have you ever used Bootsrtap? They solved this mystery in that one. And no javascript, just CSS. — Attila Fánczi, Dec 04 '21 at 15:28
I looked at the picture but they did not solve my mystery: scrolling the whole table is easy but than the header gets out of sight. Scrolling only the TBODY is the issue when you want the borders aligned. Anyway.... thnx — Hans Rottier, Dec 05 '21 at 12:40
Yes I experienced this too, so I added some CSS settings `` So the header does not run out of sight....Youre welcome! — Attila Fánczi, Dec 05 '21 at 13:30
Next I put the whole table in a `
` `
` This is how I got the side scrollbar. — Attila Fánczi, Dec 05 '21 at 13:43
Yes, the header with sticky at the top does it of course. It is not what I asked but I agree that is is an elegant solution: why making life more difficult than it is. I'll go for the table scroll with a sticky header. Maybe that is how it was intended in the first place :) You can create an answer with this solution and I'll accept it solved my problem! — Hans Rottier, Dec 06 '21 at 16:07
I have re-edited my post with the new Bootsrtap solution. Bootstrap can also be used to give tables a more modern look. I'm glad for I could helped for you! — Attila Fánczi, Dec 06 '21 at 17:03

HTML table header/row alignment

1 Answers1