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
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<table class="table table-striped sticky-header">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>Table 2</h3>
<table class="table table-striped sticky-header">
<thead>
<tr>
<th>#</th>
<th>New Table</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
CSS
body{
padding-top:50px;
}
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #fff;
}
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>Navbar and THead Fixed-Top
.table-area { position: relative; z-index: 0; margin-top: 60px;}
table.rajresponsive-table { display: table; table-layout: fixed; width: 100%; height: 100%;}
table.rajresponsive-table thead { position: fixed; top: 50px; left: 0; right: 0; width: 100%; height: 50px; line-height: 3em; table-layout: fixed; display: table;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input id="myInput" onkeyup="myFunction()" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> </form> </div></nav><br><br><section class="content-area"> <div class="table-area"> <table class="rajresponsive-table table"> <thead> <tr> <th scope="col">Status</th> <th scope="col">Computer</th> <th scope="col">IP Address</th> <th scope="col">MAC</th> </tr> </thead> <tbody id="myTableSearch"> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 1</td> <td>192.168.1.21</td> <td>92:41:04:FF:15:EB</td> </tr> <tr> <td><span class="badge badge-danger">Offline</span></td> <td>Computer 2</td> <td>192.168.1.22</td> <td>5C:3B:C8:EA:6C:3A</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 3</td> <td>192.168.1.23</td> <td>BD:2D:94:8A:63:83</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 4</td> <td>192.168.1.24</td> <td>9C:D7:16:1F:0B:A3</td> </tr> <tr> <td><span class="badge badge-danger">Offline</span></td> <td>Computer 5</td> <td>192.168.1.25</td> <td>05:C4:95:A6:B2:E6</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 1</td> <td>192.168.1.21</td> <td>92:41:04:FF:15:EB</td> </tr> <tr> <td><span class="badge badge-danger">Offline</span></td> <td>Computer 2</td> <td>192.168.1.22</td> <td>5C:3B:C8:EA:6C:3A</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 3</td> <td>192.168.1.23</td> <td>BD:2D:94:8A:63:83</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 4</td> <td>192.168.1.24</td> <td>9C:D7:16:1F:0B:A3</td> </tr> <tr> <td><span class="badge badge-danger">Offline</span></td> <td>Computer 5</td> <td>192.168.1.25</td> <td>05:C4:95:A6:B2:E6</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 1</td> <td>192.168.1.21</td> <td>92:41:04:FF:15:EB</td> </tr> <tr> <td><span class="badge badge-danger">Offline</span></td> <td>Computer 2</td> <td>192.168.1.22</td> <td>5C:3B:C8:EA:6C:3A</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 3</td> <td>192.168.1.23</td> <td>BD:2D:94:8A:63:83</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 4</td> <td>192.168.1.24</td> <td>9C:D7:16:1F:0B:A3</td> </tr> <tr> <td><span class="badge badge-danger">Offline</span></td> <td>Computer 5</td> <td>192.168.1.25</td> <td>05:C4:95:A6:B2:E6</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 1</td> <td>192.168.1.21</td> <td>92:41:04:FF:15:EB</td> </tr> <tr> <td><span class="badge badge-danger">Offline</span></td> <td>Computer 2</td> <td>192.168.1.22</td> <td>5C:3B:C8:EA:6C:3A</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 3</td> <td>192.168.1.23</td> <td>BD:2D:94:8A:63:83</td> </tr> <tr> <td><span class="badge badge-success">Online</span></td> <td>Computer 4</td> <td>192.168.1.24</td> <td>9C:D7:16:1F:0B:A3</td> </tr> <tr> <td><span class="badge badge-danger">Offline</span></td> <td>Computer 5</td> <td>192.168.1.25</td> <td>05:C4:95:A6:B2:E6</td> </tr> </tbody></table> </div></section>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
Related Topics
Css Skew Element and Get Inner Rounded Border Top
Why the CSS Calc() Function Is Not Working
Why Does .Foo A:Link, .Foo A:Visited {} Selector Override A:Hover, A:Active {} Selector in Css
Get Two Columns With Different Background Colours That Extend to Screen Edge
Styling Google Maps Infowindow
Gradients in Internet Explorer 9
How to Make CSS Visible Only For Opera
How to Insert a Line Break Before an Element Using Css
Css: Fixed Position on X-Axis But Not Y
Css3 Cross Browser Linear Gradient
Relationship Between !Important and CSS Specificity
Css Selector For Attribute Names Based on a Wildcard
Responsive CSS Triangle With Percents Width
Svg Use Element and :Hover Style
Percentage Padding/Margin on Grid Item Ignored in Firefox
How to Stop Chrome from Yellowing My Site's Input Boxes
Bootstrap Dropdowns Menus Appearing Behind Other Elements - IE7