Get started with sticky-table-headers CDN

MIT licensed

Library fixes headers in long tables during scrolling.

Tags:
  • jquery
  • sticky
  • table
  • headers

Stable version

Copied!

How to start using sticky-table-headers CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with sticky-table-headers CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/sticky-table-headers/0.1.24/js/jquery.stickytableheaders.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
            position: sticky;
            top: 0;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <table id="myTable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>28</td>
                    <td>New York</td>
                </tr>
                <tr>
                    <td>Jane Doe</td>
                    <td>32</td>
                    <td>Los Angeles</td>
                </tr>
                <tr>
                    <td>Mike Smith</td>
                    <td>45</td>
                    <td>Chicago</td>
                </tr>
                <tr>
                    <td>Emma Johnson</td>
                    <td>23</td>
                    <td>Miami</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        $(document).ready(function() {
            $('#myTable').stickyTableHeaders({
                stickyScrollElement: window
            });
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions