Исправить заголовок таблицы при прокрутке столбца tbody и столбца thead, выровненного по столбцу tbody

Question

Вот таблица с фиксированной внешней высотой, и мне нужно, когда начинается прокрутка, 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>

Answer 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>