HTML table headers always visible at top of window when viewing a large table
Check out jQuery.floatThead (demos available) which is very cool, can work with DataTables too, and can even work inside an overflow: auto
container.
Table header to stay fixed at the top when user scrolls it out of view with jQuery
You would do something like this by tapping into the scroll
event handler on window
, and using another table
with a fixed position to show the header at the top of the page.
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
} else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
#header-fixed {
position: fixed;
top: 0px;
display: none;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
Scrollable Table Keeping the headers always visible
are you using thead? i think this should work
.tbody{overflow:scroll; height:500px}
<thead>
<tr><th>head1</th>....</tr>
</thead>
<tbody>
<!-- create <tr><td>h1r1</td></td> -->
</tbody>
Freeze the top row for an html table only (Fixed Table Header Scrolling)
This is called Fixed Header Scrolling. There are a number of documented approaches:
http://www.imaputz.com/cssStuff/bigFourVersion.html
You won't effectively pull this off without JavaScript ... especially if you want cross browser support.
There are a number of gotchyas with any approach you take, especially concerning cross browser/version support.
Edit:
Even if it's not the header you want to fix, but the first row of data, the concept is still the same. I wasn't 100% which you were referring to.
Additional thought
I was tasked by my company to research a solution for this that could function in IE7+, Firefox, and Chrome.
After many moons of searching, trying, and frustration it really boiled down to a fundamental problem. For the most part, in order to gain the fixed header, you need to implement fixed height/width columns because most solutions involve using two separate tables, one for the header which will float and stay in place over the second table that contains the data.
//float this one right over second table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<table>
//Data
</table>
An alternative approach some try is utilize the tbody and thead tags but that is flawed too because IE will not allow you put a scrollbar on the tbody which means you can't limit its height (so stupid IMO).
<table>
<thead style="do some stuff to fix its position">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody style="No scrolling allowed here!">
Data here
</tbody>
</table>
This approach has many issues such as ensures EXACT pixel widths because tables are so cute in that different browsers will allocate pixels differently based on calculations and you simply CANNOT (AFAIK) guarantee that the distribution will be perfect in all cases. It becomes glaringly obvious if you have borders within your table.
I took a different approach and said screw tables since you can't make this guarantee. I used divs to mimic tables. This also has issues of positioning the rows and columns (mainly because floating has issues, using in-line block won't work for IE7, so it really left me with using absolute positioning to put them in their proper places).
There is someone out there that made the Slick Grid which has a very similar approach to mine and you can use and a good (albeit complex) example for achieving this.
https://github.com/6pac/SlickGrid/wiki
CSS: Fixed header table - how to not focus on the out-of-view row behind the fixed header when scrolled up?
You can just set container.scrollTop = 0
to programmatically scroll to very top. Code adapted to your case:
case 38: // up
currentRow?.previousElementSibling?.focus();
// check if we've reached the first <tr />
// if so, set container.scrollTop = 0
if (!currentRow?.previousElementSibling?.previousElementSibling) {
e.target.closest(".table").scrollTop = 0;
}
break;
Table fixed header and scrollable body
Here is the working solution:
table { width: 100%;}
thead, tbody, tr, td, th { display: block; }
tr:after { content: ' '; display: block; visibility: hidden; clear: both;}
thead th { height: 30px;
/*text-align: left;*/}
tbody { height: 120px; overflow-y: auto;}
thead { /* fallback */}
tbody td, thead th { width: 19.2%; float: left;}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> </tbody></table>
HTML Table Get Fixed Table Header for more then 20 row
I use this jQuery plugin: http://www.fixedheadertable.com
With it you can fix the header of the table you want.
Related Topics
Inputting a Default Image in Case the Src Attribute of an HTML ≪Img≫ Is Not Valid
How to Escape Hash Character in Url
Inline-Block Boxes Not Fitting in Their Container
Add Border-Bottom to Table Row ≪Tr≫
When to Use the !Important Property in Css
Display: Inline-Block Extra Margin
Are Class Names in CSS Selectors Case Sensitive
Center Image Horizontally Within a Div
How to Escape Ampersands in Xml So They Are Rendered as Entities in Html
Does Form Data Still Transfer If the Input Tag Has No Name
Bootstrap Full-Width With 2 Different Backgrounds (And 2 Columns)
How to Force Link from Iframe to Be Opened in the Parent Window
Why Does the HTML Input With Type "Number" Allow the Letter 'E' to Be Entered in the Field
Manually Triggering Form Validation Using Jquery
Is a Div Inside a Td a Bad Idea
How to Make Blinking/Flashing Text With CSS 3