Interactive demonstrations
The Responsive Slot Layout includes three responsive table styles: scrollable tables for horizontal overflow, responsive tables that stack on mobile devices, and responsive-card tables that transform into card layouts on smaller screens. All table styles are mobile-friendly and maintain readability across all device sizes.
.scrollable — Adds horizontal scrolling on small screens to prevent layout breaking.responsive — Stacks table rows vertically on mobile, showing labels inline with data.responsive-card — Transforms into card-style layout on mobile devices.sortable — Adds sort indicators to table headers (visual only, requires custom JS)
data-label="Column Name" — Required on each <td> for responsive and responsive-card tables. This label appears on mobile views.
Perfect for tables with many columns that need to maintain their structure on all screen sizes.
| ID | First Name | Last Name | Email Address | Phone Number | Department | Job Title | Start Date |
|---|---|---|---|---|---|---|---|
| 001 | John | Smith | john.smith@example.com | (555) 123-4567 | Engineering | Senior Developer | 2020-01-15 |
| 002 | Jane | Doe | jane.doe@example.com | (555) 234-5678 | Marketing | Marketing Manager | 2019-06-20 |
| 003 | Bob | Johnson | bob.johnson@example.com | (555) 345-6789 | Sales | Sales Representative | 2021-03-10 |
| 004 | Alice | Williams | alice.williams@example.com | (555) 456-7890 | HR | HR Specialist | 2020-09-05 |
ID
First Name
Last Name
Email Address
Phone Number
Department
Job Title
Start Date
001
John
Smith
john.smith@example.com
(555) 123-4567
Engineering
Senior Developer
2020-01-15
On mobile devices, this table stacks vertically with labels appearing inline next to each data cell. The data-label attribute is required for proper mobile display.
| Name | Role | Status | |
|---|---|---|---|
| John Smith | john.smith@example.com | Administrator | Active |
| Jane Doe | jane.doe@example.com | Editor | Active |
| Bob Johnson | bob.johnson@example.com | Viewer | Inactive |
| Alice Williams | alice.williams@example.com | Editor | Active |
Name
Email
Role
Status
John Smith
john.smith@example.com
Administrator
Active
Jane Doe
jane.doe@example.com
Editor
Active
data-label attribute must match the corresponding table header text. This label is displayed on mobile devices when the table stacks vertically.
This table style transforms into a card-based layout on mobile devices, providing a more visually distinct presentation for each row.
| Product | Category | Price | Stock |
|---|---|---|---|
| Wireless Mouse | Electronics | $29.99 | In Stock |
| USB-C Cable | Accessories | $12.99 | In Stock |
| Laptop Stand | Office | $49.99 | Low Stock |
| Mechanical Keyboard | Electronics | $89.99 | Out of Stock |
Product
Category
Price
Stock
Wireless Mouse
Electronics
$29.99
In Stock
USB-C Cable
Accessories
$12.99
In Stock
Demonstrated below is an Option 3 Responsive-Card Table with enriched styling for employee details, contact information, and role status. On mobile devices, each row transitions into an elegant card layout while retaining its visual design. RSL table components support full CSS customization while preserving the responsive behavior mode you choose.
| Employee | Contact | Role / Status |
|---|---|---|
|
JS
John Smith
Engineering
|
(555) 123-4567
|
Senior Developer
Active
|
|
JD
Jane Doe
Marketing
|
(555) 234-5678
|
Marketing Manager
On Leave
|
|
BJ
Bob Johnson
Sales
|
(555) 345-6789
|
Sales Representative
Busy
|
|
AW
Alice Williams
HR
|
(555) 456-7890
|
HR Specialist
Inactive
|
Employee
Contact
Role / Status
JS
John Smith
Engineering
(555) 123-4567
Senior Developer
Active
/* ===== Styled card table (Employee Directory) =================== */
.slot-layout .responsive-card.rsl-table-card {
border: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
/* Keep borderless even on desktop breakpoint override in tables.css */
@media (min-width: 768px) {
.slot-layout .responsive-card.rsl-table-card {
border: 0;
}
}
/* Header row */
.rsl-table-card thead th {
background: #0f172a;
color: #e5e7eb;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.75rem 1rem;
border-color: #111827;
}
/* Zebra body rows */
.rsl-table-card tbody tr:nth-child(odd) td {
background: #ffffff;
}
.rsl-table-card tbody tr:nth-child(even) td {
background: #f9fafb;
}
.rsl-table-card tbody td {
padding: 0.9rem 1rem;
border-color: #e5e7eb;
}
/* Employee cell: avatar + text stack */
.rsl-table-employee {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.rsl-table-avatar {
width: 2.25rem;
height: 2.25rem;
border-radius: 999px;
background: #4f46e5;
color: #f9fafb;
font-weight: 700;
font-size: 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rsl-table-name {
font-weight: 600;
color: #111827;
}
.rsl-table-dept {
font-size: 0.8rem;
color: #6b7280;
}
/* Contact cell: email + phone on separate lines */
.rsl-table-contact {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.rsl-table-contact-row {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
color: #111827;
}
.rsl-table-contact-row i {
font-size: 0.85rem;
color: #4b5563;
}
.rsl-table-contact-row a {
color: #1d4ed8;
text-decoration: none;
}
.rsl-table-contact-row a:hover {
text-decoration: underline;
}
/* Role + status pill */
.rsl-table-role {
font-weight: 500;
margin-bottom: 0.25rem;
color: #111827;
}
.rsl-status-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15rem 0.65rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 500;
}
.rsl-status-dot {
width: 0.45rem;
height: 0.45rem;
border-radius: 999px;
}
/* Status colors */
.rsl-status-pill--active {
background: #ecfdf3;
color: #15803d;
}
.rsl-status-pill--active .rsl-status-dot {
background: #22c55e;
}
.rsl-status-pill--leave {
background: #fef9c3;
color: #92400e;
}
.rsl-status-pill--leave .rsl-status-dot {
background: #f59e0b;
}
.rsl-status-pill--busy {
background: #fee2e2;
color: #b91c1c;
}
.rsl-status-pill--busy .rsl-status-dot {
background: #ef4444;
}
.rsl-status-pill--inactive {
background: #e5e7eb;
color: #374151;
}
.rsl-status-pill--inactive .rsl-status-dot {
background: #6b7280;
}
/* Small tweak for card layout on mobile */
@media (max-width: 767px) {
.rsl-table-card tbody td {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
}
/* Dark Mode Support */
[data-theme="dark"] .rsl-table-card tbody tr:nth-child(odd) td {
background: #1e293b;
}
[data-theme="dark"] .rsl-table-card tbody tr:nth-child(even) td {
background: #0f172a;
}
[data-theme="dark"] .rsl-table-card tbody td {
border-color: #334155;
}
[data-theme="dark"] .rsl-table-name {
color: #f1f5f9;
}
[data-theme="dark"] .rsl-table-dept {
color: #94a3b8;
}
[data-theme="dark"] .rsl-table-role {
color: #e2e8f0;
}
[data-theme="dark"] .rsl-table-contact-row {
color: #e2e8f0;
}
[data-theme="dark"] .rsl-table-contact-row i {
color: #94a3b8;
}
[data-theme="dark"] .rsl-table-contact-row a {
color: #60a5fa;
}
<thead>, <tbody>, <th>, and <td> elements<th> elements for screen readersdata-label attribute on all table cells for responsive tables - this ensures mobile users can understand the data contextcaption element to describe the table's purposescope attributes on headers to define relationships