title: how to make table head fixed while using navbar in bootstrap 4
body: <p>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. </p>
  
  <p>I have seen other answer on stackoverflow but I am not able to do the same for my website. </p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table thead tr th {
    background-color: white !important;
    position: sticky !important;
    top: -1px !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel="stylesheet" href="/stylesheets/empdetails/custom.css" /&gt;
    &lt;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"&gt;
    &lt;title&gt;EmpDetails&lt;/title&gt;
    &lt;script&gt;
      // some custom scripts
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark"&gt;
      &lt;a class="navbar-brand" href="#"&gt;EmpDetails&lt;/a&gt;
      &lt;form class="form-inline" action="javascript:update();"&gt;
        &lt;input class="form-control mx-3 ml-4" type="search" id="name" name="name" placeholder="Employee Name" aria-label="Search"&gt;
        &lt;button class="btn btn-outline-success bg-success  mx-3 text-light" type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
      &lt;button class="btn btn-outline-info bg-info  mx-3 text-light" onclick="download();"&gt;Download&lt;/button&gt;
    &lt;/nav&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;div class="table-responsive" style="overflow-x:auto;"&gt;
      &lt;table id="table" class="table table-hover"&gt;
  
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;column1&lt;/th&gt;
            &lt;th&gt;column2&lt;/th&gt;
            &lt;th&gt;column3&lt;/th&gt;
            &lt;th&gt;column4&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
            &lt;td&gt;td&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
  
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/stylesheets/empdetails/custom.css" /&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried a solution from <a href="https://stackoverflow.com/questions/56804484/how-could-i-make-bootstrap-table-with-sticky-table-head">here</a> I think I am not doing it properly. Any idea what I am doing wrong.</p>