Skip to main content

Modern Responsive Tables

Mobile-first design with CSS custom properties and enhanced accessibility

📱 ↔️ 💻 Resize your browser window to see the responsive magic in action!

Default Responsive Table

The foundation of our responsive table system. On mobile devices, the table transforms into a card-based layout with data labels automatically generated from the data-th attributes.

Movie Title Genre Year Box Office Rating
Star Wars: A New Hope Adventure, Sci-Fi 1977 $775,398,007 ⭐⭐⭐⭐⭐
The Godfather Crime, Drama 1972 $287,000,000 ⭐⭐⭐⭐⭐
Pulp Fiction Crime, Drama 1994 $214,179,088 ⭐⭐⭐⭐⭐
The Shawshank Redemption Drama 1994 $28,341,469 ⭐⭐⭐⭐⭐

Table with Striped Rows & Hover Effects

Enhanced visual feedback with alternating row colors and smooth hover transitions.

Company Founded Headquarters Market Cap Industry
Apple Inc. 1976 Cupertino, CA $3.5T Technology
Microsoft 1975 Redmond, WA $3.2T Software
Google (Alphabet) 1998 Mountain View, CA $2.1T Internet Services
Amazon 1994 Seattle, WA $1.8T E-commerce

Light Theme Table

A clean, minimal light theme perfect for content-heavy applications and dashboards.

Project Name Status Progress Due Date Team Lead
A.mphibio.us v3.0 🟢 Active 75% Dec 2025 Clive Moore
Mobile App Redesign 🟡 In Review 90% Nov 2025 Design Team
API Documentation 🔴 Delayed 45% Oct 2025 Dev Team

Compact Table

Space-efficient design for data-dense applications and smaller screens.

Symbol Name Price 24h Change Market Cap
BTC Bitcoin $43,250 +2.5% $850B
ETH Ethereum $2,680 +4.1% $320B
ADA Cardano $0.58 -1.2% $20B

Key Features

🎨 CSS Custom Properties

Easily customizable with CSS variables for colors, spacing, and breakpoints. Theme your tables to match your brand.

📱 Mobile-First Design

Starts with mobile layout and progressively enhances for larger screens. Ensures optimal experience on all devices.

♿ Enhanced Accessibility

Proper ARIA labels, focus management, and screen reader friendly. Meets WCAG 2.1 AA standards.

🎭 Multiple Themes

Dark, light, and custom theme variants. Automatic dark mode detection with prefers-color-scheme.

🖨️ Print Optimized

Special print styles ensure tables render beautifully on paper with proper borders and spacing.

⚡ Performance Focused

Minimal CSS footprint with efficient selectors. Respects user's motion preferences for animations.

Implementation

To use the responsive table system, simply add the appropriate classes and data attributes:

<table class="rwd-table table-striped table-hover"> <thead> <tr> <th scope="col">Column 1</th> <th scope="col">Column 2</th> </tr> </thead> <tbody> <tr> <td data-th="Column 1">Data 1</td> <td data-th="Column 2">Data 2</td> </tr> </tbody> </table>

Available Classes