Navbar and THead Fixed-Top

fixed header on scroll html
table thead fixed tbody scroll css
html table with fixed header and scrollable body
fixed table header bootstrap
sticky header bootstrap
sticky table header css
css fixed header scrolling body
bootstrap sticky header on scroll

I am creating a simple site that will show a list of computers along with some of their information. So far I've got everything functioning pretty much how I want except I can't get the thead to stay fixed to the navbar while scrolling. I'm still pretty new to all this, but I'll list some of the things I've tried below along with a simplified version of my web page.

  1. Putting a div around navbar/table through thead: Doesn't scroll
  2. Making the tbody scrollable and fixing the position of navbar/thead: ruined formatting
  3. Applying fixed position just to thead: Also ruins formatting

Any help is greatly appreciated!

HTML

    <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>
<table id="myTable" class="table table-striped table-hover tablesorter">
  <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>

JS

$(function() {
  $("#myTable").tablesorter();
});

    $(document).ready(function(){
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTableSearch tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
});

https://jsfiddle.net/80Lt2d6p/

.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>

How to stick table header(thead) on top while , Bootstrap layout with fixed-navbar . Having table with so many rows in body. Issue? As i scroll the page navigation-bar will be there because it is fixed. as i� i´m using Datatables with a fixedHeader:true and a bootstrap nav-bar with fixed-top-class. When i scroll down the page the table header disapperars. My expectation is, that the table-header should be fixed to the bottom of the nav-bar. When i remove bootstrap´s fixed-top it works - but then the page-header disappears on scrolling.

We can use the answer provided here as a starting point with the following modification:

.table-fixed {
  width: 100%;
}

.table-fixed thead th {
    position: sticky;
    position: -webkit-sticky;
    /*top: 0;*/
    top:55px; /* the height of the fixed nav-bar */
    z-index: 999;
    background-color: #000;
    color: #fff;
}

Now remove the <br> right after the nav-bar in your HTML.

<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>
<!-- remove the br from here, we will tackle this with the top:55px -->

Here's an updated JSFiddle: DEMO

Fixed Headers Bootstrap Table (Responsive), Analyze HTML; Maximize HTML Editor; Minimize HTML Editor; Fold All; Unfold All. xxxxxxxxxx. 68. 1. <nav class="navbar navbar-inverse navbar-fixed-top">. 2. Apply the position utility class .fixed-top to the .navbar element to fix the navbar at the top of the viewport, so that it won't scroll with the page. Here's an example: Here's an example: Example

Maybe this will help you It's a fiddle based on your own.

1st) make the thead fixed with some simple check, just like the following

$(window).scroll(function() {
if ($(this).scrollTop() >= 100) { 
    $('#myTable').addClass('fixed');  
} else {
            $('#myTable').removeClass('fixed');
    }
});

2nd) Apply some css

#myTable.fixed thead { 
  position: fixed; background: #dddddd;
  left: 0; width: 100%;
}

I am not sure about which formatting is ruined, if you are talking about the th then you can style that with some css

https://jsfiddle.net/bLjdhc9x/1/

How To Create an On Scroll Fixed Header, Learn how to create a fixed/sticky header on scroll with CSS and JavaScript. to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */ Get the offset position of the navbar Step 2) Add CSS: To create a fixed top menu, use position:fixed and top:0.Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.

Position Sticky and Table Headers, You can't position: sticky; a <thead> . Nor a <tr> . But you can sticky a <th> , which means you can make sticky headers inside a regular ol'� Today we will re-create this fixed header style from Foundry HTML template, it’s one of the most popular HTML templates in ThemeForest.. Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you.

Bootstrap 3 RC Example Fixed Table Header, </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class='table table-bordered table-fixed-header'> <thead class='header'> <tr>� position: fixed; top: 0; width: 100%} /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */.sticky + .content { padding-top: 102px;}

Fixed Top Navbar Example for Bootstrap, This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to� The main navigation bar has the exact same links as we are keeping in the fixed header bar. This was made so by design, however you could change things up and place only the most important links in your fixed navigation. The header may contain dropdowns which also feel out of place in a sliding fixed navbar. Customizing CSS

Comments
  • @StaticBeagle position: sticky; position: -webkit-sticky; not support some browser