Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Sticky Table Header
See original GitHub issuei am using the sticky header with fixed height for the table. when the row is more than 5 it will create auto scroll. when i am checking the check box ,check box available For the first 5 rows is checking properly but if the scroll is scrolled then the checkbox is not checking properly its misleading to uncheck the already check one since its checking the back/behind check box automatically. To sort this issue ,i tried Z-Index but it doesn’t support me. please guide me that where i am going wrong.
.table_overflow {
max-height: 225px !important;
overflow: auto;
margin-bottom: 10px;
}
.ui.report_table.table thead tr:first-child > th {
position: sticky !important;
top: 0 !important;
z-index: 2 !important;
}
.p_0{
padding: 0px !important;
}
<div class="ui segment table_overflow p_0">
<table class="ui fixed single line celled report_table table" id="">
<thead>
<tr>
<th style="width:60px;">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</th>
<th>Registered Name</th>
<th>Registered Number</th>
<th>Barcode Ref</th>
<th>Company Indicator</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
</tbody>
</table>
</div>
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
Position Sticky and Table Headers
But you can sticky a <th> , which means you can make sticky headers inside a regular ol' <table> . This is tricky...
Read more >How to stick table header(thead) on top while scrolling ...
If using Bootstrap 4, you can just use .sticky-top on all the th . If you also have a sticky nav , then...
Read more >Sticky table headers
CSS ; { /* Background color */ background-color ;; /* Stick to the left */ left ; : ·; position ;; /* Displayed...
Read more >Table Sticky Header
Adding Classes. In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template....
Read more >Fixed Table Headers
A few months ago I built an example of fixed table headers that used CSS position: sticky , partly to demonstrate it is...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@hajanajubudeen88 👍 Ok, confirmed the behavior and also confirmed the fix by @ko2in But as this is not a feature of FUI, we are not going to change something in the framework yet. But your code is a nice example of sticky header scrolling tables…i smell a new feature in FUI here…someday…
Sticky table headers/footers are now available as a
scrollingvariant for v2.9.0 by #2134Your original approach can also be used natively using the css classes of the sticky module by adding
ui fixed top native stickyto thetheadelement. However, this is not working in some browsers and scrolling moves some borders, but this is the simplest approach. See https://jsfiddle.net/lubber/7tymwhvg/19/