how to make table head fixed while using navbar in bootstrap 4

Question

I am trying to have a navbar and a table. The table is long and wide so it needs to be scrollable both and x and y.

I have seen other answer on stackoverflow but I am not able to do the same for my website.

I am not sure even if the custom CSS is being used properly. The table is taken from examples I found on the web. The nav header is working properly and stays on top. But the Table header does not and it disappears when I scroll down.

 table thead tr th { background-color: white !important; position: sticky !important; top: -1px !important; }

 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="/stylesheets/empdetails/custom.css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>EmpDetails</title> <script> // some custom scripts </script> </head> <body> <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">EmpDetails</a> <form class="form-inline" action="javascript:update();"> <input class="form-control mx-3 ml-4" type="search" id="name" name="name" placeholder="Employee Name" aria-label="Search"> <button class="btn btn-outline-success bg-success mx-3 text-light" type="submit">Search</button> </form> <button class="btn btn-outline-info bg-info mx-3 text-light" onclick="download();">Download</button> </nav> <br> <br> <br> <div class="table-responsive" style="overflow-x:auto;"> <table id="table" class="table table-hover"> <thead> <tr> <th>column1</th> <th>column2</th> <th>column3</th> <th>column4</th> </tr> </thead> <tbody> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> </tbody> </table> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="/stylesheets/empdetails/custom.css" /> </body> </html>

I tried a solution from here I think I am not doing it properly. Any idea what I am doing wrong.

Answer 1

You can just put a fixed position on table head element like this:

thead {
  position: fixed;
}

This should keep your columns fixed on top

how to make table head fixed while using navbar in bootstrap 4

Question

1 answers

solution1
0 2019-08-08 20:29:00

how to make table head fixed while using navbar in bootstrap 4

Question

1 answers

solution1 0 2019-08-08 20:29:00

solution1
0 2019-08-08 20:29:00