Get started with fixed-header-table CDN
MIT licensed
Library keeps table headers stationary during long data scrolling.
Tags:- header
- fixed
- table
Stable version
Copied!
How to start using fixed-header-table CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with fixed-header-table 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/fixed-header-table/1.3.0/jquery.fixedheadertable.min.js"></script>
<style>
table { width: 100%; }
th, td { border: 1px solid black; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<div class="container mt-5">
<table id="fixedHeaderTable" 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>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>28</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Bob Smith</td>
<td>45</td>
<td>Chicago</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#fixedHeaderTable').fixedHeaderTable();
});
</script>
</body>
</html>
Copied!
Copied!