HTML table header/row 对齐

Question

关于这个主题的文章太多了（太多了？），以至于有人想知道为什么 css 或 HTML 都没有给出一个优雅的解决方案：a header 和数据列 (thead/tbody) 的边界之间的耦合。

抱歉，我仍然无法正确处理。我做错了什么？想念什么？还是这种方式根本不可能，我需要 javascript?

明确地说，我希望 header 使用 CSS 与 table 数据列对齐。所以在一个简单的视图中，第 8 个 header 字段需要比滚动条的宽度宽一点。单元格的宽度现在由样式宽度说明符确定并自动计算。显然我无法在 tbody 和 thead 之间建立耦合。

请注意 table 的水平调整大小处理正确。另请注意，注释掉的是 width: calc(100% - 17px); 这反映了我的部分实验。该示例有点复杂，以保持其原始格式，这可能会在问题中发挥作用。

参见 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>

Answer 1

我对 CSS 做了一些更改，所以现在 <th> 和 <td> 是垂直对齐的。 <thead> 向内移动了滚动条的大小。问题是 table 的大小是固定的，或者它是否会包含很多数据，因为如果我减少行数，我会用 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。你试过 Bootsrap 吗？他们在这里解开了谜团。

https://i.stack.imgur.com/a9Yem.jpg

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>

HTML table header/row 对齐

HTML table header/row alignment

html

css

html-table

html-tbody