Как сделать-й на столе unscrollable с фиксированной высотой

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>