HTML Table

This page demonstrates production-ready table patterns with accessibility, responsive overflow handling, sorting, filtering, and export support.

Sticky header and frozen columns for wide datasets.
Interactive table with search, status filter, sorting, and export.
Scoped styles and scripts so demos do not leak into other page content.

Need sticky behavior fundamentals (stacked heading offsets and sticky mechanics)? HTML Sticky Element Fundamentals

This example keeps the header visible while scrolling and freezes the first two columns to preserve row context on large tables.

Dataset Preview with Sticky Header and Frozen First Two Columns
Record	Group	Col 3	Col 4	Col 5	Col 6	Col 7	Col 8	Col 9	Col 10	Col 11	Col 12	Col 13	Col 14	Col 15
R-001	Alpha	13	74	22	65	41	90	52	11	86	37	49	28	63
R-002	Alpha	31	62	48	70	19	82	56	29	75	41	61	33	58
R-003	Beta	22	88	35	57	44	76	60	18	92	39	54	27	71
R-004	Beta	18	66	29	73	52	84	40	25	81	47	68	31	64
R-005	Gamma	27	71	33	69	46	78	51	21	87	36	59	30	66
R-006	Gamma	34	64	41	75	38	89	43	24	79	50	55	26	60
R-007	Delta	20	80	28	61	49	85	57	15	93	34	62	32	74
R-008	Delta	26	68	37	77	42	83	45	23	88	48	58	35	67
R-009	Epsilon	29	72	39	63	53	87	42	17	84	46	65	36	69
R-010	Epsilon	32	67	30	79	47	81	55	20	90	44	57	29	62
R-011	Zeta	24	75	34	66	50	86	48	19	83	42	63	33	68
R-012	Zeta	36	61	44	72	40	80	53	27	89	49	56	34	61
R-013	Eta	21	84	27	59	55	88	46	16	91	38	67	31	73
R-014	Eta	28	69	36	78	43	82	50	22	85	47	60	37	65
R-015	Theta	33	65	42	71	45	79	54	24	88	51	58	35	64
R-016	Theta	19	83	31	62	57	90	44	14	94	40	66	30	76
R-017	Iota	30	70	38	74	41	85	52	26	82	45	62	32	67
R-018	Iota	23	77	29	64	54	87	47	18	90	39	69	28	72
R-019	Kappa	35	63	45	76	39	81	56	28	87	50	59	36	63
R-020	Kappa	22	82	32	60	58	89	43	15	93	41	68	29	75

This render is HTML markup plus shared sticky-table modifiers. No page JavaScript is required.

<div class="html-table-demo html-table-demo--freeze table-sticky table-sticky--freeze-two table-sticky--zebra table-sticky--center table-sticky--freeze-leading-left-2">
  <table class="content--sticky">
    <caption>Dataset Preview with Sticky Header and Frozen First Two Columns</caption>
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

/* shared: asset/css/content/example/table-sticky.scss */
.table-sticky--freeze-two ... nth-child(1) { position: sticky; left: 0; }
.table-sticky--freeze-two ... nth-child(2) { position: sticky; left: var(--table-sticky-col1-width, 8.5rem); }
.table-sticky table.content--sticky thead th { position: sticky; top: var(--sticky-caption-height, 0); }

This demo focuses on practical table UX. Search, filter, and sorting apply only to this table instance, and export actions only include visible rows.

For consistency and reliability, this demo exports JSON and CSV only.

Customer Orders
ID	Customer	Location	Order Date	Status	Amount
1	Eric	Purrfort	17 Dec, 2022	✅ Delivered	$128.90
2	Bearfoot	Paw Ridge	27 Aug, 2023	❌ Cancelled	$5,350.50
3	Dinner	Feastsburg	14 Mar, 2023	🚚 Shipped	$210.40
4	Sparkles	Glitterpaw	25 May, 2023	✅ Delivered	$149.70
5	Max	Clawvale	23 Apr, 2023	⏳ Pending	$399.99
6	Cleo	Purropolis	23 Apr, 2023	❌ Cancelled	$399.99
7	Pepper	Spiceburg	28 Feb, 2023	⏳ Pending	$149.70
8	Cheese	Brieville	22 Dec, 2023	❌ Cancelled	$249.99
10	Luna	Moonpaw	11 Jan, 2024	⏳ Pending	$640.00
11	Nori	Harbor Cliffs	18 Jan, 2024	🚚 Shipped	$315.25
12	Otis	Tabby Point	23 Jan, 2024	❌ Cancelled	$72.10
13	Piper	Pawston	02 Feb, 2024	✅ Delivered	$1,200.00
9	Kiki	Whisker Bay	06 Jan, 2024	✅ Delivered	$89.50
14	Quill	Ink Alley	08 Feb, 2024	⏳ Pending	$58.75
15	Rivet	Gear Hollow	14 Feb, 2024	🚚 Shipped	$402.00
16	Saffron	Sunridge	20 Feb, 2024	✅ Delivered	$980.90

Keep the markup small and let the page script handle search, filter, sort, summary, and CSV/JSON export.

<div class="html-table-toolbar">...controls...</div>

<div id="orders-table" class="html-table-demo html-table-demo--orders table-sticky table-sticky--zebra table-sticky--orders-layout">
  <table class="content--sticky">
    <caption><span class="font-icon--example-html-table--cart"></span> Customer Orders</caption>
    <thead>...</thead>
    <tbody>
      <tr data-id="1" data-customer="Eric" data-status="delivered" data-amount="128.90">...</tr>
    </tbody>
  </table>
</div>

/* asset/js/content/example/html-table.js */
// Reads row data-* attributes, then:
// - filters by search/status
// - sorts rows
// - updates visible-row summary
// - exports visible rows to JSON or CSV

Page HTML: in/example/html-table.html
Shared sticky table SCSS: in/asset/css/content/example/table-sticky.scss
Page SCSS (wrappers/toolbar/status): in/asset/css/content/example/html-table.scss
Page JS (interactive orders demo): in/asset/js/content/example/html-table.js

Attribution

This page includes adapted ideas and patterns from the following sources:

Sticky table approach: adriancs.com Sticky Table Demo (https://adriancs.com/html-css-js/298/html-table-freeze-row-and-column-with-css/) .
Responsive table inspiration: GitHub Responsive Table Reference (https://github.com/JeetSaru/Responsive-HTML-Table-With-Pure-CSS---Web-Design-UI-Design) .
Kitten avatars generated with ChatGPT (https://chat.openai.com/) .

HTML Table

Sticky Header and Frozen Columns

Code for This Render

Interactive Orders Table (Search, Filter, Sort, Download)

Code for This Render

Files for These Renders

Attribution