javascript - 滚动 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>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>  <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>     
    </tbody>
  </table>
  </div>

标签： javascriptjqueryhtmlcss

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>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>  <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>     
    </tbody>
  </table>
  </div>