How to make th on table unscrollable with fixed height

Question

I have a problem making a scrollable table... I put my table inside a div below:

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

As you can see the pictures above, the column header (th) is not displayed if scrolled down. I want it to be displayed even when I'm scrolling it down. Just a note: I don't want to make two tables for it...

My Fiddle: https://jsfiddle.net/Lwbg59jp/

`overflow:hidden;` or don't set the max-height – Feb 06 '17 at 03:17 — , Feb 06 '17 at 03:17
but i want to set the height – Alexander Chandra Feb 06 '17 at 03:27 — Alexander Chandra, Feb 06 '17 at 03:27

score 0 · Answer 1 · answered Feb 06 '17 at 04:15

hi you can do something like this

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

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

check this code link https://jsfiddle.net/romesh60/x3y9r7gg/

thanks

score 0 · Answer 2 · answered Feb 06 '17 at 04:18

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>

thank you for the answer, but if i do position absolute, my th width and my td width will became different therefore i must set my width, and i dont want to set the width — Alexander Chandra, Feb 06 '17 at 04:42

How to make th on table unscrollable with fixed height

2 Answers2