jQuery Freeze Table

Freeze Table is a powerful yet easy-to-use jQuery plugin to make table columns and/or headers stay in place when scrolling. The primary features of Freeze Table Plugin:

  • Sticks table headers to the top when scrolling down.
  • Sticks table columns to the left when the table width is greater than the container width.
  • Custom styles for the sticky table headers and columns.
  • Supports dynamic table content.
  • Compatible with the latest Bootstrap 4 framework.

Live Demo

Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est Lorem Ipsum
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning


Scrollable Table
Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est Lorem Ipsum
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning


Freeze Column(s) only
# Date Text Bank (1930) Eget kapital John Doe (2010) Eget kapital Jane Doe (2020) Utgående moms 25 % (2610) Moms varuförvärv EU 25 % (2615) Ingående moms 25 % (2640) Ingående moms utland (2645) Moms redovisningskonto (2650) Momspliktiga intäkter (3000) Inköp varor EU 25 % (4056) Förbrukningsinventarier (5400) Kontorsmaterial och trycksaker (6100) Övriga externa tjänster (6500) Bankavgifter (6570) Årets resultat (8999)
Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit
1 2014-01-11 Office stuff 100 SEK 25 SEK 75 SEK
2 2014-02-12 iPad 5000 SEK 1250 SEK 3750 SEK
3 2014-03-20 Office stuff 100 SEK 25 SEK 75 SEK
4 2014-04-11 iPhone 7000 SEK 1750 SEK 5250 SEK
12 200 SEK 3050 SEK 8000 SEK 150 SEK


Freeze Head only
Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est Lorem Ipsum
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning


Multi-Columns Freeze Table
# Date Text Bank (1930) Eget kapital John Doe (2010) Eget kapital Jane Doe (2020) Utgående moms 25 % (2610) Moms varuförvärv EU 25 % (2615) Ingående moms 25 % (2640) Ingående moms utland (2645) Moms redovisningskonto (2650) Momspliktiga intäkter (3000) Inköp varor EU 25 % (4056) Förbrukningsinventarier (5400) Kontorsmaterial och trycksaker (6100) Övriga externa tjänster (6500) Bankavgifter (6570) Årets resultat (8999)
Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit
1 2014-01-11 Office stuff 100 SEK 25 SEK 75 SEK
2 2014-02-12 iPad 5000 SEK 1250 SEK 3750 SEK
3 2014-03-20 Office stuff 100 SEK 25 SEK 75 SEK
4 2014-04-11 iPhone 7000 SEK 1750 SEK 5250 SEK
12 200 SEK 3050 SEK 8000 SEK 150 SEK


Shadow Enabled Table
Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est Lorem Ipsum
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning



Customized Styles Table
# Group A Group B Group C Group D Group E Group F Group G Group H Group I
# Column A.1 Column A.2 Column B.1 Column B.2 Column C.1 Column C.2 Column D.1 Column D.2 Column E.1 Column E.2 Column F.1 Column F.2 Column G.1 Column G.2 Column H.1 Column H.2 Column I.1 Column I.2
1 Column A.1 Column A.2 Column B.1 Column B.1 Column C.1 Column C.2 Column D.1 Column D.2 Column E.1 Column E.2 Column F.1 Column F.2 Column G.1 Column G.2 Column H.1 Column H.2 Column I.1 Column I.2
2 Column A Column A Column B Column B Column C Column C Column D Column D Column E Column E Column F Column F Column G Column G Column H Column H Column I Column I
3 Column A Column A Column B Column B Column C Column C Column D Column D Column E Column E Column F Column F Column G Column G Column H Column H Column I Column I
4 Column A Column A Column B Column B Column C Column C Column D Column D Column E Column E Column F Column F Column G Column G Column H Column H Column I Column I


Freeze Scroll Bar Table (Fixed on the bottom of the screen)
Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est Lorem Ipsum
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning


Freeze Column(s) Keep

Freeze column(s) will always be displayed to support interactive table.

# Select Text Bank (1930) Eget kapital John Doe (2010) Eget kapital Jane Doe (2020) Utgående moms 25 % (2610) Moms varuförvärv EU 25 % (2615) Ingående moms 25 % (2640) Ingående moms utland (2645) Moms redovisningskonto (2650) Momspliktiga intäkter (3000) Inköp varor EU 25 % (4056) Förbrukningsinventarier (5400) Kontorsmaterial och trycksaker (6100) Övriga externa tjänster (6500) Bankavgifter (6570) Årets resultat (8999)
Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit Credit Debit
1 Office stuff 100 SEK 25 SEK 75 SEK
2 iPad 5000 SEK 1250 SEK 3750 SEK
3 Office stuff 100 SEK 25 SEK 75 SEK
4 iPhone 7000 SEK 1750 SEK 5250 SEK
12 200 SEK 3050 SEK 8000 SEK 150 SEK

How to Use

Add the css below to your html page

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="narrow-jumbotron.css" rel="stylesheet">

Create a container where you want to render table

<div class="freeze-table">
  <table class="table">
    <thead>
      <th>...</th>
    </thead>
    <tbody>
      <td>...</td>
    <tbody>
  </table>
</div>

Load jQuery library together with the Freeze Table library into your code

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="dist/js/freeze-table.js"></script>
<script>
    $(document).ready(function () {

        $(".table-basic").freezeTable();

        $(".table-scrollable").freezeTable({
            'scrollable': true,
        });

        $('#table-modal').one('shown.bs.modal', function (e) {

            $(this).find(".table-modal").freezeTable({
                'container': '#table-modal.modal',
            });
        });

        $(".table-columns-only").freezeTable({
            'freezeHead': false,
        });

        $(".table-head-only").freezeTable({
            'freezeColumn': false,
        });

        // 2 Columns to be fixed
        $(".table-multi-columns").freezeTable({
            'columnNum': 2,
        });

        // Shadow enabled
        $(".table-shadow").freezeTable({
            'shadow': true,
        });

        // Customized styles
        $(".table-wrap-styles").freezeTable({
            'headWrapStyles': {
                'box-shadow': '0px 9px 10px -5px rgba(159, 159, 160, 0.8)'
            },
        });

        $(".table-with-scrollbar").freezeTable({
            'scrollBar': true,
        });

        // Freeze Column(s) Keep
        $(".table-column-keep").freezeTable({
            'columnNum': 2,
            'columnKeep': true,
        });
    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.