固定表头，同时滚动tbody和thead列与tbody列对齐

本文介绍了固定表头，同时滚动tbody和thead列与tbody列对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这里的桌子的外部高度是固定的，我需要在滚动开始时固定thead，并且tbody将是滚动的，以显示每一列的标题.是否有任何想法将桌子的标题固定在桌子的顶部和内部内容上将滚动.

Here is table with fixed outer height, and i need when scroll start, thead will be fixed and tbody will be scroll that show heading of each column.Is there any idea to fix heading of table on top and inner content of table will be scroll.

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

推荐答案

使用更新的CSS进行检查

Check this with updated 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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>  <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
        <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>     
    </tbody>
  </table>
  </div>

这篇关于固定表头，同时滚动tbody和thead列与tbody列对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！