stick table header scroll - Free Download Stick Table Header To The Top When Scrolling Down - fixHeader

Free Download Stick Table Header To The Top When Scrolling Down – fixHeader

By Posted on

This time I will share jQuery Plugin and tutorial about Stick Table Header To The Top When Scrolling Down – fixHeader, hope it will help you in programming stack.

stick table header scroll - Free Download Stick Table Header To The Top When Scrolling Down - fixHeader
File Size: 3.31 KB
Views Total: 2562
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

fixHeader is a super tiny jQuery plugin which sticks the table header to the top of the page when the user scrolls past the table thead element.

How to use it:

1. Download and insert the main JavaScript fixHeader.js after the latest jQuery library (slim build is recommended).

view source
1 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
2         integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
3         crossorigin="anonymous">
4 </script>
5 <script src="./src/fixHeader.js"></script>

2. Just add the CSS class fix_header_table to the HTML table and done. Note that your HTML table must have a thead element.

view source
001 <table class="fix_header_table">
002   <thead>
003     <tr>
004       <td>header1</td>
005       <td>header2</td>
006       <td>header3</td>
007       <td>header4</td>
008       <td>header5</td>
009       <td>header6</td>
010       <td>header7</td>
011       <td>header8</td>
012       <td>header9</td>
013       <td>header10</td>
014       <td>header11</td>
015       <td>header12</td>
016     </tr>
017   </thead>
018   <tbody>
019     <tr>
020         <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
021         <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
022     </tr>
023     <tr>
024         <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
025         <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
026     </tr>
027     <tr>
028         <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
029         <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
030     </tr>
031     <tr>
032         <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
033         <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
034     </tr>
035     <tr>
036         <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
037         <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
038     </tr>
039     <tr>
040         <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
041         <td>column7</td><td>column8</td><td>column9</td><td>column10</td><td>column11</td><td>column12</td>
042     </tr>
043     <tr>
044         <td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td>
045         <td>column7</td><td>column8</td><td>column9</td><td source : jquery.net

Related posts: