在滚动tbody和thead列与tbody列对齐时修复表头

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在滚动tbody和thead列与tbody列对齐时修复表头相关的知识,希望对你有一定的参考价值。

这里是固定外部高度的表,我需要滚动开始时,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>
答案

用更新的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>

以上是关于在滚动tbody和thead列与tbody列对齐时修复表头的主要内容,如果未能解决你的问题,请参考以下文章

tbody滚动条占位导致与thead表头错位

thead固定tbody滚动

html里面加thead、tbody 以及 tfoot 有啥用?直接用<tr><td>不就可以了吗

table固定表头固定列实现横向纵向滚动

HTML tbody only 只有一个标题列宽

<table> 具有固定的 <thead> 和可滚动的 <tbody> [重复]