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:
Available Classes
.rwd-table- Base responsive table.table-striped- Alternating row colors.table-hover- Hover effects.table-light- Light theme variant.table-compact- Reduced padding.table-spacious- Increased padding