Fix table thead when scroll browser page in Angular - html

Question

I want to fix table thead in angular when it gets top page. When I scroll inside table scrolling thead is fixing and this situation I use sticky but when I scroll browser page it doesn't work. Bellow a image what exactly I want
enter image description here
in html
<div class="table-responsive " style="width: 100%; height: 670px;">
<!--<table class="table table-striped table-bordered">-->
<table class="table table-hover info">
<thead>
<tr style="background-color: lightskyblue;">
<th>ID</th>
<!--<th jhiTranslate="jhiApp.kassa.date_enter">DateEnter</th>-->
<th jhiTranslate="jhiApp.kassa.date_prov">DateProv</th>
<th jhiTranslate="jhiApp.kassa.date_doc">DateDoc</th>
<th jhiTranslate="jhiApp.kassa.num_doc">NumDoc</th>
<th jhiTranslate="jhiApp.kassa.acc_db">AccDb</th>
<th jhiTranslate="jhiApp.kassa.bank_db">BankDb</th>
<th jhiTranslate="jhiApp.kassa.name_db">NameDb</th>
<th jhiTranslate="jhiApp.kassa.acc_cr">AccCr</th>
<th jhiTranslate="jhiApp.kassa.bank_cr">BankCr</th>
<th jhiTranslate="jhiApp.kassa.name_cr">NameCr</th>
<th jhiTranslate="jhiApp.kassa.currency">Currency</th>
<th jhiTranslate="jhiApp.kassa.summa">Summa</th>
<th jhiTranslate="jhiApp.kassa.summa_eq">SummaEq</th>
<th jhiTranslate="jhiApp.kassa.purpose">Purpose</th>
<th jhiTranslate="jhiApp.kassa.inn_db">InnDb</th>
<th jhiTranslate="jhiApp.kassa.inn_cr">InnCr</th>
</tr>
</thead>
<tbody *ngFor="let array of kassas">
</tbody>
</table>
</div>
in css
thead th {
position: sticky;
top: 0;
background-color: lightskyblue;
}

Answer 1

Maybe this code be usefull
thead th{
background-color: lightskyblue;
}
thead {
position: sticky;
top: 0;
}
.table-responsive {
max-height: 400px;
overflow: auto;
position: sticky;
top: 0;
background-color: #fff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<h1>Table</h1>
<div class="table-responsive " style="width: 100%; height: 670px;">
<!--<table class="table table-striped table-bordered">-->
<table class="table table-hover info">
<thead>
<tr>
<th>ID</th>
<!--<th jhiTranslate="jhiApp.kassa.date_enter">DateEnter</th>-->
<th jhiTranslate="jhiApp.kassa.date_prov">DateProv</th>
<th jhiTranslate="jhiApp.kassa.date_doc">DateDoc</th>
<th jhiTranslate="jhiApp.kassa.num_doc">NumDoc</th>
<th jhiTranslate="jhiApp.kassa.acc_db">AccDb</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>
<p>lorem</p>

Answer 2

Scrolling <tbody> with fixed <thead> (well in your case, sticky <thead>) is a log discussed thread.
See the answers to enter link description here, especially this one
If that does not help, see this sticky implementation here and try not to use table but other html tags like for instance plain <div>s and style accordingly. I've seen the example uses description list tags.
I've had a similar situation (with the need for fixed <thead>) so I ended up with this approach. My case implied the material lib but it does not matter the approach of scrolling the "table" body is the same.

Answer 3

You can try my new Angular sticky library. I created it because I missed such functionality and no solutions worked for me. https://ngx-sticky-copy.netlify.app/ It is easy, you only apply *scStickyThead directive on tHead and you go.