如何在桌子上打开不可滚动的固定高度

Question

制作可滚动的表时遇到问题... 我把桌子放在下面的div里面：

<div class="table-responsive" id="table_wrapper" style=" max-height: 500px">

如上图所示，如果向下滚动，则不会显示列标题（th）。 即使我滚动它，我希望它显示出来。 请注意：我不想为它制作两张桌子......

我的小提琴：https://jsfiddle.net/Lwbg59jp/

Answer 1

嗨，你可以做这样的事情

<table cellspacing="0" cellpadding="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
 </tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
</tr>
<tr class="normalRow">
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
</tr>
<tr class="normalRow">
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
</tr>
<tr class="normalRow">
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
</tr>
<tr class="normalRow">
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
  </tr>

</tbody>
</table>

CSS代码

table.scrollTable {
border: 1px solid #963;
width: 718px;
}
thead.fixedHeader{
 display: block;
}
thead.fixedHeader tr {
 height: 30px;
 background: #c96;
}
thead.fixedHeader tr th{
border-right: 1px solid black;
 }

tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
}
tbody.scrollContent td{
background: #eee;
border-right: 1px solid black;
height: 25px;
}

tbody.scrollContent tr.alternateRow td{
background: #fff;
}
thead.fixedHeader th {
width:233px;
}
thead.fixedHeader th:last-child{
width: 251px;
}
tbody.scrollContent td {
width: 233px;
}

检查此代码链接https://jsfiddle.net/romesh60/x3y9r7gg/

感谢

Answer 2

td {
   
    padding-right: 20px;
    position: relative;
    top: 18px;
}
thead {
    position: absolute;
}

<div style="max-height: 200px;overflow:auto;">
<table>
  <thead>
    <tr>
      <th>column 1</th>
      <th>column 2</th>
      <th>column 3</th>
      <th>column 4</th>
      <th>column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    <tr>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
      <td>sample</td>
    </tr>
    
  </tbody>
</table>
</div>