Creating a Sticky Header for Tables with CSS and JavaScript (JQuery)

Question

Creating a Sticky Header for Tables with CSS and JavaScript (JQuery)

While there are many examples of sticky headers available, my experience using a JavaScript approach has been successful for smaller tables with 100-150 rows. However, when dealing with larger tables containing 600-700+ rows, the script tends to slow down significantly and may take 10-15 seconds to load the results.

This delay in loading is not ideal from a user-friendly perspective, especially considering how impatient customers can be.

I suspect the reason for the slower performance is due to the sheer amount of data being handled. The script essentially clones the table, removes the header on one clone and the body on the other, allowing for a scrolling feature with a sticky header.

In light of this, my question is: what is the most efficient way, in terms of speed, to create a table with a sticky header? Is it possible to achieve this effect using CSS alone, eliminating the need for JavaScript?

Thank you.

javascript jquery html css

Answer 1

Answer №1

The key lies in the arrangement of div elements inside the th tags, along with the wrapper div.container

Essentially, the sticky header effect is achieved by positioning the divs inside the th tags absolutely, while the scrolling functionality is assigned to the wrapper.

Although not a universal solution, this method can work well for simpler cases.

var rows = $('tbody tr');
for (var i = 0; i < 300; i++) {
rows.clone().appendTo($('tbody'));
}

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

I came across this fiddle from an unknown creator, here is the source link I found: (I added the repetition part)

https://jsfiddle.net/dPixie/byB9d/3/light/

Answer 2

The key lies in the arrangement of div elements inside the th tags, along with the wrapper div.container

Essentially, the sticky header effect is achieved by positioning the divs inside the th tags absolutely, while the scrolling functionality is assigned to the wrapper.

Although not a universal solution, this method can work well for simpler cases.

var rows = $('tbody tr');
for (var i = 0; i < 300; i++) {
rows.clone().appendTo($('tbody'));
}

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

I came across this fiddle from an unknown creator, here is the source link I found: (I added the repetition part)

https://jsfiddle.net/dPixie/byB9d/3/light/

Creating a Sticky Header for Tables with CSS and JavaScript (JQuery)

Answer №1

Similar questions

Navigation drop-down extending beyond the boundaries of the screen

Running queries in a loop is not functional within node-firebird

Ways to rerun a Vuex Getter

Monitor changes in the clientWidth property of this.$el in Vue

Having an alignment problem with my logo and inline block navigation due to CSS coding

Angular and the dynamic transformation of the DOM tree through an array

Strategies for transferring a dynamic variable to a parent window's form in JavaScript?

Angular having issues with Bootstrap navbar dropdown functionality

Can an HTML file be transformed into a QR code format?

Input field in a tableview

Performing numerous asynchronous MongoDB queries in Node.js

Using Vue/Nuxt.js to compute the cumulative sum of hierarchically structured JSON data

The JavaScript copy function is no longer functioning properly following the update to the href link

Unacceptable response from AJAX function

The column with a class of col-md-3 is not rendering properly

Guide to setting up the redux-form with initial values pulled from the store

Locating a specific element within an array using AngularJS / Conditional statement within ng-class

Performing synchronized execution in a node.js application by utilizing the 'readline' package

What is the correct way to employ async/await in combination with Array.filter within a React application?

Resizing the carousel container dimensions in Angular-UI-Bootstrap