Sticky Header
A copy-paste tables & data grids component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Tables & Data GridsHTMLCSSany framework
| Product | SKU | Price |
|---|---|---|
| Orbit Pro | SKU-100 | $19.99 |
| Nexus S | SKU-101 | $24.99 |
| Velo X | SKU-102 | $29.99 |
| Aura M | SKU-103 | $34.99 |
| Pulse Z | SKU-104 | $39.99 |
Copy into your project
HTML
<div class="nuda-tbl-sticky">
<div class="nuda-tbl-sticky__scroll">
<table class="nuda-tbl-sticky__table">
<thead>
<tr>
<th class="nuda-tbl-sticky__th">Product</th>
<th class="nuda-tbl-sticky__th">SKU</th>
<th class="nuda-tbl-sticky__th">Price</th>
</tr>
</thead>
<tbody>
<tr class="nuda-tbl-sticky__row">
<td class="nuda-tbl-sticky__td">Orbit Pro</td>
<td class="nuda-tbl-sticky__td">SKU-100</td>
<td class="nuda-tbl-sticky__td">$19.99</td>
</tr>
<tr class="nuda-tbl-sticky__row">
<td class="nuda-tbl-sticky__td">Nexus S</td>
<td class="nuda-tbl-sticky__td">SKU-101</td>
<td class="nuda-tbl-sticky__td">$24.99</td>
</tr>
<tr class="nuda-tbl-sticky__row">
<td class="nuda-tbl-sticky__td">Velo X</td>
<td class="nuda-tbl-sticky__td">SKU-102</td>
<td class="nuda-tbl-sticky__td">$29.99</td>
</tr>
<tr class="nuda-tbl-sticky__row">
<td class="nuda-tbl-sticky__td">Aura M</td>
<td class="nuda-tbl-sticky__td">SKU-103</td>
<td class="nuda-tbl-sticky__td">$34.99</td>
</tr>
<tr class="nuda-tbl-sticky__row">
<td class="nuda-tbl-sticky__td">Pulse Z</td>
<td class="nuda-tbl-sticky__td">SKU-104</td>
<td class="nuda-tbl-sticky__td">$39.99</td>
</tr>
</tbody>
</table>
</div>
</div>CSS
.nuda-tbl-sticky {
width: 100%;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.1);
overflow: hidden;
background: #141414;
}
.nuda-tbl-sticky__scroll {
max-height: 140px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
.nuda-tbl-sticky__table {
width: 100%;
border-collapse: collapse;
font-size: .78rem;
}
.nuda-tbl-sticky__th {
position: sticky;
top: 0;
z-index: 2;
padding: .5rem .75rem;
text-align: left;
color: #777;
font-weight: 600;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .06em;
background: #1a1a1a;
border-bottom: 1px solid rgba(255,255,255,.15);
white-space: nowrap;
}
.nuda-tbl-sticky__td {
padding: .42rem .75rem;
color: #cfcfcf;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.nuda-tbl-sticky__row:hover .nuda-tbl-sticky__td {
background: rgba(228,255,84,.04);
}
.nuda-tbl-sticky__row:last-child .nuda-tbl-sticky__td {
border-bottom: none;
}
How to use Sticky Header
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.