HTML 表头/行对齐

Posted

技术标签:

【中文标题】HTML 表头/行对齐【英文标题】：HTML table header/row alignment 【发布时间】：2022-01-10 11:00:03 【问题描述】：

关于这个主题已经写了很多变体（太多了？），以至于人们想知道为什么在 css 或 html 中都没有给出一个优雅的解决方案：标题边界和数据之间的耦合列 (thead/tbody)。

我还是没弄好，抱歉。 我做错了什么？想念什么？ 还是这种方式根本不可能，我需要javascript吗？

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

请注意，表格的水平调整大小已正确处理。 另请注意，注释掉的是 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>

【问题讨论】：

【参考方案1】：

我对 CSS 做了一些更改，所以现在 &lt;th&gt; 和 &lt;td&gt; 垂直对齐。 &lt;thead&gt; 已向内移动了滚动条的大小。问题是表的大小是固定的，还是会包含很多数据，因为如果我减少行数，我会用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>

附：你试过引导程序吗？他们已经解开了这里的谜。

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>

【讨论】：

您好，感谢您的回复。确实有效。但是，如果我这样做，例如 .CUtable th，它会失败。虽然我当时所做的只是说 .CUtable 类中的所有内容，但不是这样。那么区别在哪里呢？ 另外我看不懂` th, td width: 33.33%;填充：5px；断词：打破一切； ` 我也不明白为什么该广告有 display: table; 如果我很好地理解了这个解决方案，你说它只能通过近似来完成（一些填充、一些百分比、一些显示更改等......）。所以它正在解决一个拼图iso算法。这将指向 javascript 的真正解决方案（真实表格将显示 30/31 行，其中显示 10 行（因此溢出滚动条）。 是的，如果滚动条因为数据减少到例如而被消除少于 10 行，&lt;tbody&gt; 将采用&lt;table&gt; 的最大大小。为此，我会使用 javascript 来监控 table 的溢出并将当前的 CSS 调整为。 是的，我也遇到过这种情况，所以我添加了一些 CSS 设置 &lt;thead style="position: sticky; top:0; z-index: 1; background: #d0d0d0; "&gt; 所以标题不会消失在视线范围内....欢迎您！

以上是关于HTML 表头/行对齐的主要内容，如果未能解决你的问题，请参考以下文章

上下两个table无法对齐

html页面渲染chrome vs IE

学习总结Markdown 使用-表格及其居中等格式

element-ui的table表格的表头与内容列对齐

Element - table表格控件表头和内容列不对齐的问题

修改easyui中datagrid表头和数据不能分开对齐的BUG。