1

I have a datatable and I want to implement both a fixed header and a horizontal scroll. The fixed header and horizontal scroll each work by themselves but once I try to use both it does not work.

Without the scrollbar I have the fixed header, without the fixed header I have the scroll bar. And with both, I also have the scrollbar without the fixed header. How can I use both. I've read that they are incompatible features but there must be a reasonable way around this issue by either using HTML, CSS, and/or JS. Any help here is greatly appreciated!

https://jsfiddle.net/Ntuttle3/jrz5npLb/9/

HTML

<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>Album example for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
  </head>

  <body>
    <header>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="/"> <img src="#" height="30" width="30" class="d-inline-block align-top"> Website</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"> <a class="nav-link" href="#">Office</a> </li>
          </ul>
        </div>
      </nav>
    </header>
    <main>
      <br>
      <br>

      <table id="dtBasicExample">
        <thead>
          <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
            <th>Header5</th>
            <th>Header6</th>
            <th>Header7</th>
            <th>Header8</th>
            <th>Header9</th>
            <th>Header10</th>
            <th>Header11</th>
            <th>Header12</th>
            <th>Header13</th>
            <th>Header14</th>
            <th>Header15</th>
            <th>Header16</th>
            <th>Header17</th>
            <th>Header18</th>
            <th>Header19</th>
            <th>Header20</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
            <td>Column 13</td>
            <td>Column 14</td>
            <td>Column 15</td>
            <td>Column 16</td>
            <td>Column 17</td>
            <td>Column 18</td>
            <td>Column 19</td>
            <td>Column 20</td>
          </tr>
        </tbody>
      </table>

      <br>
    </main>
    <div class="footer">
      <div class="container">
        <div id="footer-center">Copyright © My Comapany
          <div id="footer-right"><a href="#" class="text-muted">Back to top</a></div>
          <div style="clear: both"></div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.footer {
  background-color: #003366;
  text-align: center;
  color: white;
  height: 30px;
}

#footer-center {
  color: white;
}

#footer-right {
  float: right;
  color: blue;
}

.navbar-nav li:hover>.dropdown-menu {
  display: block;
  content: none;
}

.dropdown-menu.show {
  background-color: #f5f6f7;
}

header {
  height: 75px;
  background: red;
  left: 0;
  right: 0;
  width: 100%;
  position: fixed;
  z-index: 500;
}

nav {
  background-color: #262626;
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
}

thead tr th,
tbody tr td {
  width: 150 px;
  min-width: 150 px;
  max-width: 150 px;
}

table th {
  position: -webkit-sticky;
  background: #fff;
  text-align: center;
}

table {
  font-size: 14px;
}

main {
  margin: auto;
  flex: 1;
  padding-top: 75;
  margin: 0 auto;
  width: 90%;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

td {
  text-align: center;
}

table tr td:first-child {
  text-align: left;
  padding-left: 25px;
}

table.GeneratedTable {
  width: 100%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-color: #ffcc00;
  border-style: solid;
  color: #000000;
}

table.GeneratedTable td,
table.GeneratedTable th {
  border-color: #ffcc00;
  border-style: solid;
  padding: 10px;
}

table.GeneratedTable thead {
  background-color: #ffcc00;
}

Javascript

  $(document).ready(function() {
    $('#dtBasicExample').DataTable({
      "searching": true,
      "paging": true,
      "pageLength": 50,
      "info": false,
      "scrollX": true,
      "fixedHeader": {
        "headerOffset": 75
      }
    })
  });
Nick T
  • 643
  • 2
  • 9
  • 22
  • The fixed header is a dynamically appended table before the closing body tag. So even if you were to wrap it in an overflow wrapping div you would have 2 different scoll contexts... a scrollbar for your header, and one for you data. They wouldn't be "synced" up. Are you trying to get just 1 scrollbar? – zgood Mar 25 '19 at 18:04
  • That is a bummer. Yes, 1 scrollbar. Hopefully someone knows a work around – Nick T Mar 25 '19 at 18:07
  • Thats not possible with fixed elements. Its not a datatables issue, its a CSS issue. _"Because a fixed position element is fixed with respect to the viewport, not another element."_ See this [SO post](https://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug) – zgood Mar 25 '19 at 18:28

3 Answers3

0

This is currently not possible, per the documentation:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

They also provide a feature compatibility table, which should help you to determine if there are any other needs it satisfies or if this is a dealbreaker and it's just not the right solution for you.

denmch
  • 1,446
  • 12
  • 20
0

I am still a novice, but I think you wanted to achieve this.

$(document).ready(function() {
    $('#dtBasicExample').DataTable({
      "searching": true,
      "paging": true,
      "pageLength": 50,
      "info": false,
      "scrollX": true,
      scrollCollapse: true,
      "scrollY":'60vh'
    })
  });
Abhishek chauhan
  • 1
  • 1
0

Late answer, but if you change your div container into container-fluid, it will work.

Charles Lavalard
  • 2,061
  • 6
  • 26
chris
  • 1