Tables still power a lot of dashboards, reports, pricing matrices, and admin screens. The problem is that classic tables were designed for wide viewports, which makes them tough to read on phones. <\/p>\n\n\n\n
Hi folks, I have several basic HTML tables in a web app and I need them to work well on small screens without sacrificing accessibility. How can CSS be used to convert basic HTML tables into fully responsive layouts? I want to keep the table semantics, avoid JS if possible, and still support features like sticky headers and images inside cells. Any recommended patterns or pitfalls to avoid?<\/em><\/p>\n\n\n\n Great question. There is no single silver bullet for responsive tables, but you can combine a few CSS patterns to cover most use cases. Here are the key strategies, from least to most transformative for the layout.<\/p>\n\n\n\n Preserve semantics and design by enabling overflow on small screens. This keeps the table intact and is ideal for data-heavy pages.<\/p>\n\n\n For narrow screens, turn each row into a card-like block and use a label for each value via the Tip: If you prefer to avoid hardcoding data-label, you can generate them with a tiny script that copies header text into each cell on load.<\/p>\n\n\n For long lists, keep the header visible while scrolling.<\/p>\n\n\n Once your CSS is in place, you can keep tables fast and crisp by delivering right-sized images for each cell. Cloudinary lets you request exactly the width you need and automatically picks an efficient format. Example image in a table cell:<\/p>\n\n\n That single change reduces bandwidth and improves perceived performance on mobile. <\/p>\n\n\n\nAnswer:<\/h2>\n\n\n\n
Strategy 1: Make the table horizontally scrollable<\/h3>\n\n\n\n
<div<\/span> class<\/span>=\"table-wrap\"<\/span>><\/span>\n\u00a0 <table<\/span> class<\/span>=\"orders\"<\/span>><\/span>...<\/table<\/span>><\/span>\n<\/div<\/span>><\/span>\n\n\/* CSS *\/\n.table-wrap {\n\u00a0 overflow-x: auto;\n\u00a0 -webkit-overflow-scrolling: touch;\n}\n\n.orders {\n\u00a0 width: 100%;\n\u00a0 border-collapse: collapse;\n\u00a0 min-width: 640px; \/* ensure useful scroll on narrow screens *\/\n}\n\n.orders th,\n.orders td {\n\u00a0 padding: 12px 8px;\n\u00a0 text-align: left;\n\u00a0 border-bottom: 1px solid #e5e7eb;\n}\n\n.orders th { white-space: nowrap; }<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nStrategy 2: Stack rows into \u201ccards\u201d with labels (no JS)<\/h3>\n\n\n\n
data-label<\/code> attribute. This is very readable on phones.<\/p>\n\n\n<table<\/span> class<\/span>=\"orders orders--stacked\"<\/span>><\/span>\n\u00a0 <thead<\/span>><\/span>\n\u00a0 \u00a0 <tr<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <th<\/span> scope<\/span>=\"col\"<\/span>><\/span>Order<\/th<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <th<\/span> scope<\/span>=\"col\"<\/span>><\/span>Customer<\/th<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <th<\/span> scope<\/span>=\"col\"<\/span>><\/span>Total<\/th<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <th<\/span> scope<\/span>=\"col\"<\/span>><\/span>Status<\/th<\/span>><\/span>\n\u00a0 \u00a0 <\/tr<\/span>><\/span>\n\u00a0 <\/thead<\/span>><\/span>\n\u00a0 <tbody<\/span>><\/span>\n\u00a0 \u00a0 <tr<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <td<\/span> data-label<\/span>=\"Order\"<\/span>><\/span>#1842<\/td<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <td<\/span> data-label<\/span>=\"Customer\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 <img<\/span> class<\/span>=\"avatar\"<\/span> alt<\/span>=\"\"<\/span> src<\/span>=\"avatar.jpg\"<\/span>><\/span> Jane Doe\n\u00a0 \u00a0 \u00a0 <\/td<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <td<\/span> data-label<\/span>=\"Total\"<\/span>><\/span>$128.50<\/td<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <td<\/span> data-label<\/span>=\"Status\"<\/span>><\/span><span<\/span> class<\/span>=\"pill pill--ok\"<\/span>><\/span>Shipped<\/span<\/span>><\/span><\/td<\/span>><\/span>\n\u00a0 \u00a0 <\/tr<\/span>><\/span>\n\u00a0 <\/tbody<\/span>><\/span>\n<\/table<\/span>><\/span>\n\n\/* CSS *\/\n.orders--stacked { width: 100%; border-collapse: collapse; }\n\n\/* Visually hide the header but keep it accessible to screen readers *\/\n.orders--stacked thead {\n\u00a0 position: absolute;\n\u00a0 width: 1px; height: 1px;\n\u00a0 padding: 0; margin: -1px;\n\u00a0 overflow: hidden; clip: rect(0 0 0 0); border: 0;\n}\n\n.orders--stacked tr,\n.orders--stacked td { display: block; width: 100%; }\n\n.orders--stacked tr {\n\u00a0 margin-bottom: 12px;\n\u00a0 border: 1px solid #e5e7eb;\n\u00a0 border-radius: 8px;\n\u00a0 padding: 8px 12px;\n}\n\n.orders--stacked td {\n\u00a0 display: grid;\n\u00a0 grid-template-columns: 8rem 1fr;\n\u00a0 gap: 0.5rem;\n\u00a0 border: 0;\n\u00a0 padding: 10px 0;\n}\n\n.orders--stacked td::before {\n\u00a0 content: attr(data-label);\n\u00a0 font-weight: 600;\n\u00a0 color: #4b5563;\n}\n\n.avatar {\n\u00a0 width: 40px; height: 40px;\n\u00a0 border-radius: 50%;\n\u00a0 object-fit: cover;\n}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n<script<\/span>><\/span>\nconst<\/span> table = document<\/span>.querySelector('.orders'<\/span>);\nif<\/span> (table) {\n\u00a0 const<\/span> headers = [...table.querySelectorAll('thead th'<\/span>)].map(th<\/span> =><\/span> th.textContent.trim());\n\u00a0 table.querySelectorAll('tbody tr'<\/span>).forEach(row<\/span> =><\/span> {\n\u00a0 \u00a0 [...row.children].forEach((cell, i<\/span>) =><\/span> {\n\u00a0 \u00a0 \u00a0 cell.setAttribute('data-label'<\/span>, headers[i] || ''<\/span>);\n\u00a0 \u00a0 });\n\u00a0 });\n}\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nStrategy 3: Sticky headers for long tables<\/h3>\n\n\n\n
.table-wrap<\/span> {\n\u00a0 max-height<\/span>: 60vh<\/span>; \/* opt-in vertical scroll *\/<\/span>\n\u00a0 overflow<\/span>: auto;\n}\n\n.orders<\/span> th<\/span> {\n\u00a0 position<\/span>: sticky;\n\u00a0 top<\/span>: 0<\/span>;\n\u00a0 background<\/span>: #fff<\/span>;\n\u00a0 z-index<\/span>: 1<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nImages and media inside cells<\/h3>\n\n\n\n
\n
max-width: 100%<\/code> and height: auto<\/code>.<\/li>\n\n\n\nobject-fit: cover<\/code> for cropped avatars or thumbnails.<\/li>\n\n\n\nAccessibility and UX checklist<\/h3>\n\n\n\n
\n
scope=\"col\"<\/code> and clear header text.<\/li>\n\n\n\nPerformance tips<\/h3>\n\n\n\n
\n
loading=\"lazy\"<\/code>.<\/li>\n\n\n\nEnhance the pattern with Cloudinary<\/h3>\n\n\n\n
<img<\/span>\n\u00a0 src<\/span>=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/f_auto,q_auto,w_96\/sample.jpg\"<\/span>\n\u00a0 srcset<\/span>=\"\n\u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/f_auto,q_auto,w_96\/sample.jpg 96w,\n\u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/f_auto,q_auto,w_160\/sample.jpg 160w,\n\u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/f_auto,q_auto,w_240\/sample.jpg 240w\n\u00a0 \"<\/span>\n\u00a0 sizes<\/span>=\"(max-width: 640px) 96px, 48px\"<\/span>\n\u00a0 loading<\/span>=\"lazy\"<\/span>\n\u00a0 alt<\/span>=\"Customer avatar\"<\/span>\n\u00a0 class<\/span>=\"avatar\"<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nTL;DR<\/h2>\n\n\n\n
\n
Learn More<\/h2>\n\n\n\n