Get started with floatthead CDN

CC BY-SA 4.0 licensed

JS plugin, FloatThead: tables scroll, headers stay fixed.

Tags:
  • locked header
  • floating header
  • fixed header
  • fixed table header
  • table
  • thead
  • floatThead
  • scrolling table

Stable version

Copied!

How to start using floatthead CDN


<!DOCTYPE html>
<html>
<head>
    <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/floatthead/2.2.5/jquery.floatThead.min.js"></script>
    <style>
        table { width: 100%; }
        th, td { vertical-align: top; }
    </style>
</head>
<body>
    <table id="example" class="table table-bordered table-striped">
        <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>Bob Smith</td>
                <td>45</td>
                <td>Chicago</td>
            </tr>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $('#example').floatThead();
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!

All versions