Responsive Tables
Always Responsive
Horizontal Scrolling Table
Use .table-responsive to enable horizontal scrolling on all screen sizes
| # | First Name | Last Name | Username | Phone | Address | City | Country | Zip Code | Status | Actions | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Sarah | Johnson | @sarahj | [email protected] | +1 (555) 123-4567 | 123 Main Street | New York | United States | 10001 | Active |
|
| 2 | Michael | Chen | @mchen | [email protected] | +1 (555) 234-5678 | 456 Oak Avenue | San Francisco | United States | 94102 | Active |
|
| 3 | Emily | Davis | @emilyd | [email protected] | +1 (555) 345-6789 | 789 Pine Road | Chicago | United States | 60601 | Pending |
|
| 4 | David | Wilson | @dwilson | [email protected] | +1 (555) 456-7890 | 321 Elm Street | Boston | United States | 02101 | Inactive |
|
Breakpoint Responsive Tables
Responsive SM
Use .table-responsive-sm for < 576px
| # | Name | Role | |
|---|---|---|---|
| 1 | Sarah Johnson | [email protected] | Admin |
| 2 | Michael Chen | [email protected] | Editor |
| 3 | Emily Davis | [email protected] | Viewer |
Responsive MD
Use .table-responsive-md for < 768px
| # | Name | Role | |
|---|---|---|---|
| 1 | Sarah Johnson | [email protected] | Admin |
| 2 | Michael Chen | [email protected] | Editor |
| 3 | Emily Davis | [email protected] | Viewer |
Responsive LG
Use .table-responsive-lg for < 992px
| # | Name | Role | |
|---|---|---|---|
| 1 | Sarah Johnson | [email protected] | Admin |
| 2 | Michael Chen | [email protected] | Editor |
| 3 | Emily Davis | [email protected] | Viewer |
Responsive XL
Use .table-responsive-xl for < 1200px
| # | Name | Role | |
|---|---|---|---|
| 1 | Sarah Johnson | [email protected] | Admin |
| 2 | Michael Chen | [email protected] | Editor |
| 3 | Emily Davis | [email protected] | Viewer |
Stacked Table Pattern
Mobile-Friendly Stacked Layout
Table transforms to card-like stacked layout on mobile devices
| Order ID | Customer | Product | Amount | Date | Status |
|---|---|---|---|---|---|
| #ORD-7245 | James Rodriguez | MacBook Pro 16" | $2,499.00 | Jan 15, 2026 | Delivered |
| #ORD-7244 | Emma Thompson | iPhone 15 Pro Max | $1,199.00 | Jan 14, 2026 | Processing |
| #ORD-7243 | Robert Kim | AirPods Pro 2 | $249.00 | Jan 14, 2026 | Shipped |
| #ORD-7242 | Sophia Martinez | Apple Watch Ultra 2 | $799.00 | Jan 13, 2026 | Cancelled |
| #ORD-7241 | William Brown | iPad Pro 12.9" | $1,099.00 | Jan 12, 2026 | Delivered |
Column Priority Pattern
Priority-Based Column Visibility
Less important columns are hidden on smaller screens using responsive utility classes
| Name | Phone | Department | Location | Status | Actions | |
|---|---|---|---|---|---|---|
Sarah Johnson
|
[email protected] | +1 (555) 123-4567 | Engineering | New York, NY | Active |
|
Michael Chen
|
[email protected] | +1 (555) 234-5678 | Marketing | San Francisco, CA | Active |
|
Emily Davis
|
[email protected] | +1 (555) 345-6789 | Sales | Chicago, IL | Pending |
|
David Wilson
|
[email protected] | +1 (555) 456-7890 | HR | Boston, MA | Inactive |
|
Lisa Anderson
|
[email protected] | +1 (555) 567-8901 | Finance | Austin, TX | Active |
|
Column visibility by breakpoint:
- XS (<576px): Name, Email, Status
- SM (≥576px): + Actions
- MD (≥768px): + Phone
- LG (≥992px): + Department
- XL (≥1200px): + Location (all columns visible)
Card-Based Mobile Layout
Responsive Card Table
Switches from table view on desktop to card view on mobile
| Project | Team Lead | Progress | Deadline | Budget | Status |
|---|---|---|---|---|---|
|
Website Redesign
UI/UX, Development
|
Sarah Johnson
|
|
Feb 28, 2026 | $45,000 | On Track |
|
Mobile App Development
iOS, Android
|
Michael Chen
|
|
Apr 15, 2026 | $120,000 | At Risk |
|
Cloud Migration
Infrastructure
|
Emily Davis
|
|
Jan 10, 2026 | $75,000 | Completed |
Website Redesign
UI/UX, Development
Sarah Johnson
Progress
85%
Feb 28, 2026
$45,000
Mobile App Development
iOS, Android
Michael Chen
Progress
45%
Apr 15, 2026
$120,000
Cloud Migration
Infrastructure
Emily Davis
Progress
100%
Jan 10, 2026
$75,000
Overflow Indicator
Scroll Indicator Table
Gradient fade indicates more content is available on scroll
| Invoice # | Client | Project | Amount | Issue Date | Due Date | Payment Method | Status | Actions |
|---|---|---|---|---|---|---|---|---|
| INV-2024-001 | Acme Corporation | Website Development | $12,500.00 | Jan 01, 2026 | Jan 31, 2026 | Bank Transfer | Paid |
|
| INV-2024-002 | Tech Innovations Ltd | Mobile App Design | $8,750.00 | Jan 05, 2026 | Feb 04, 2026 | Credit Card | Pending |
|
| INV-2024-003 | Global Services Inc | Cloud Infrastructure | $25,000.00 | Jan 10, 2026 | Feb 09, 2026 | Bank Transfer | Overdue |
|
| INV-2024-004 | StartUp Ventures | Brand Identity | $5,200.00 | Jan 12, 2026 | Feb 11, 2026 | PayPal | Paid |
|
| INV-2024-005 | Enterprise Solutions | Security Audit | $15,800.00 | Jan 15, 2026 | Feb 14, 2026 | Bank Transfer | Processing |
|
Sticky First Column
Fixed First Column on Scroll
First column stays visible while scrolling horizontally
| Employee | Q1 Sales | Q2 Sales | Q3 Sales | Q4 Sales | Total Sales | Commission | Bonus | Performance |
|---|---|---|---|---|---|---|---|---|
|
Sarah Johnson
|
$125,000 | $142,500 | $138,000 | $165,000 | $570,500 | $28,525 | $15,000 | Excellent |
|
Michael Chen
|
$98,000 | $112,000 | $105,500 | $128,000 | $443,500 | $22,175 | $10,000 | Good |
|
Emily Davis
|
$87,500 | $92,000 | $88,500 | $95,000 | $363,000 | $18,150 | $7,500 | Average |
|
David Wilson
|
$156,000 | $175,500 | $168,000 | $192,000 | $691,500 | $34,575 | $20,000 | Top Performer |
|
Lisa Anderson
|
$72,000 | $68,500 | $75,000 | $82,000 | $297,500 | $14,875 | $5,000 | Below Target |
Responsive Classes Reference
Bootstrap Responsive Table Classes
Quick reference for table responsive utilities
| Class | Breakpoint | Description |
|---|---|---|
.table-responsive |
Always | Horizontal scrolling on all screen sizes |
.table-responsive-sm |
< 576px | Horizontal scrolling below small breakpoint |
.table-responsive-md |
< 768px | Horizontal scrolling below medium breakpoint |
.table-responsive-lg |
< 992px | Horizontal scrolling below large breakpoint |
.table-responsive-xl |
< 1200px | Horizontal scrolling below extra-large breakpoint |
.table-responsive-xxl |
< 1400px | Horizontal scrolling below extra-extra-large breakpoint |