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>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>Tailwind css table with fixed header and scrolling tbody vertically
You could add a max-height to your table's parent div and
set position:sticky and top:0 for your thead
<div class="table-wrp block max-h-96">
<table class="w-full">
<thead class="bg-white border-b sticky top-0">
<!-- other table content -->
<tbody></tbody>
</thead>
</table>
</div>
Example
<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-100">
<main>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg py-4 px-4">
<form class="mb-4" method="POST" action="https://shipping.local/login">
<div class="address">
<div class="item mb-2 md:flex md:flex-wrap md:justify-between">
<div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block w-full sm:px-6 lg:px-8">
<div class="table-wrp block max-h-96">
<table class="w-full">
<thead class="bg-white border-b sticky top-0">
<tr>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Select
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Company
</th>
<th scope="col" class="text-md font-medium text-gray-900 px-6 py-4 text-left">
Address
</th>
</tr>
</thead>
<tbody class=" h-96 overflow-y-auto">
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="1">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST </td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="2">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
BATHURST
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="3">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
MUDGEE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="4">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
ORANGE
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<input type="checkbox" name="address" value="5">
</td>
<td class="text-sm font-extrabold text-gray-900 font-light px-6 py-4 whitespace-nowrap">
TAREN POINT
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">Address Here Address Here Address Here Address Here Address Here Address Here </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Livewire Component wire-end:rbWM5jbW8w1GcT2ql3DF -->
</div>
</div>
</form>
</div>
</div>
</div>
</main>
</div>Bootstrap Table with Fixed Column on top when scrolling down
You can just add a position: sticky; on the table's thead and it will stick to the top with top: 0;. More on position property here.
thead {
position: sticky;
top: 0;
background-color: #fff !important;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card-body" style="height:400px; width:99%; overflow:scroll;">
<!--TABLE-->
<h5>ED Visits Suspected Drug Overdose Data</h5>
<div class="table">
<table class="table mb-0">
<thead>
<tr style="vertical-align:center;">
<th scope="col">Ohio County</th>
<th scope="col">2016 Q3 </th>
<th scope="col">2016 Q4 </th>
<th scope="col">2017 Q1 </th>
<th scope="col">2017 Q2 </th>
<th scope="col">2017 Q3 </th>
<th scope="col">2017 Q4 </th>
<th scope="col">2018 Q1 </th>
<th scope="col">2018 Q2 </th>
<th scope="col">2018 Q3 </th>
<th scope="col">2018 Q4 </th>
<th scope="col">2019 Q1 </th>
<th scope="col">2019 Q2 </th>
<th scope="col">2019 Q3 </th>
<th scope="col">2019 Q4 </th>
<th scope="col">2020 Q1 </th>
</tr>
<tbody>
<tr>
<td>You</td>
<td>53</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>You</td>
<td>53</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>You</td>
<td>53</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>You</td>
<td>53</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>You</td>
<td>53</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>You</td>
<td>53</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>You</td>
<td>53</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>You</td>
<td>53</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</tbody>
</thead>
<!--data and codes-->
</table>
</div>
</div>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
How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
Use: https://github.com/mkoryak/floatThead
Docs: http://mkoryak.github.io/floatThead/examples/bootstrap3/
$(document).ready(function(){
$(".sticky-header").floatThead({top:50});
});
DEMO with 2 Tables and Fixed Header: http://jsbin.com/zuzuqe/1/
http://jsbin.com/zuzuqe/1/edit
HTML
Related Topics
How to Calculate Required Hue-Rotate to Generate Specific Colour
Remove ':Hover' CSS Behavior from Element
How to Strike Through Obliquely with CSS
How to Set the Thumbnail Image on HTML5 Video
Bash Script to Convert from HTML Entities to Characters
Vertically Centering a Div in Body
Making a Custom Input Text Type
Html/CSS Hack to Allow Overflow-X: Auto & Overflow-Y: Visible
How to Make Child Divs Use All Available Space When One Makes the Container Scroll
Customise Ng Bootstrap Carousel in Angular
Z-Index Without Absolute Position
Css: Why Background-Color Breaks/Removes the Box-Shadow
How to Use External Font in CSS
CSS Show Div Background Image on Top of Other Contained Elements