滚动 tbody 时修复表头，thead 列与 tbody 列对齐答案

【问题标题】：Fix table head while scrolling tbody and thead column aligned to tbody column滚动 tbody 时修复表头，thead 列与 tbody 列对齐
【发布时间】：2019-03-07 17:55:35
【问题描述】：

这是具有固定外部高度的表格，我需要在滚动开始时，thead 将被固定，tbody 将滚动显示每列的标题。有没有办法将表格标题固定在表格的顶部和内部内容上将滚动。

.max_height{max-height:100px;overflow:auto;}

<div class="max_height">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>  <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>     
    </tbody>
  </table>
  </div>

【问题讨论】：

Freeze the top row for an html table only (Fixed Table Header Scrolling)的可能重复
stackoverflow.com/questions/4709390/…的可能重复
请注意：建议的 2 个重复项具有相当古老的公认答案。这些问题中有更新的答案，仅使用 css，因此值得向下滚动。在 2019 年，无需为此使用 javascript 解决方案（根据两个接受的答案）

标签： javascript jquery html css

【解决方案1】：

用更新的 css 检查这个

.max_height{margin:0px;max-width:450px;}
table thead,table tbody{
  display:block;
}

table tbody{
  max-height:100px;
  overflow:auto;
}

table tr{
  display:table;
  width:100%;
  table-layout:fixed;
}

<div class="max_height">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>  <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>     
    </tbody>
  </table>
  </div>

【讨论】：