首页 > javascript > 在滚动tbody和thead列与tbody列对齐时修复表头

在滚动tbody和thead列与tbody列对齐时修复表头 (Fix table head while scrolling tbody and thead column aligned to tbody column)

问题

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


问题

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

解决方法

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

相似信息