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 | sales.swarajyainfotech@gmail.com | +91 9404190417 | 123 Main Street | New York | United States | 10001 | Active |
|
| 2 | Michael | Chen | @mchen | sales.swarajyainfotech@gmail.com | +91 9404190417 | 456 Oak Avenue | San Francisco | United States | 94102 | Active |
|
| 3 | Emily | Davis | @emilyd | sales.swarajyainfotech@gmail.com | +91 9404190417 | 789 Pine Road | Chicago | United States | 60601 | Pending |
|
| 4 | David | Wilson | @dwilson | sales.swarajyainfotech@gmail.com | +91 9404190417 | 321 Elm Street | Boston | United States | 02101 | Inactive |
|
Breakpoint Responsive Tables
Responsive SM
Use .table-responsive-sm for < 576px
| # | Name | Role | |
|---|---|---|---|
| 1 | Sarah Johnson | sales.swarajyainfotech@gmail.com | Admin |
| 2 | Michael Chen | sales.swarajyainfotech@gmail.com | Editor |
| 3 | Emily Davis | sales.swarajyainfotech@gmail.com | Viewer |
Responsive MD
Use .table-responsive-md for < 768px
| # | Name | Role | |
|---|---|---|---|
| 1 | Sarah Johnson | sales.swarajyainfotech@gmail.com | Admin |
| 2 | Michael Chen | sales.swarajyainfotech@gmail.com | Editor |
| 3 | Emily Davis | sales.swarajyainfotech@gmail.com | Viewer |
Responsive LG
Use .table-responsive-lg for < 992px
| # | Name | Role | |
|---|---|---|---|
| 1 | Sarah Johnson | sales.swarajyainfotech@gmail.com | Admin |
| 2 | Michael Chen | sales.swarajyainfotech@gmail.com | Editor |
| 3 | Emily Davis | sales.swarajyainfotech@gmail.com | Viewer |
Responsive XL
Use .table-responsive-xl for < 1200px
| # | Name | Role | |
|---|---|---|---|
| 1 | Sarah Johnson | sales.swarajyainfotech@gmail.com | Admin |
| 2 | Michael Chen | sales.swarajyainfotech@gmail.com | Editor |
| 3 | Emily Davis | sales.swarajyainfotech@gmail.com | 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
|
sales.swarajyainfotech@gmail.com | +91 9404190417 | Engineering | New York, NY | Active |
|
Michael Chen
|
sales.swarajyainfotech@gmail.com | +91 9404190417 | Marketing | San Francisco, CA | Active |
|
Emily Davis
|
sales.swarajyainfotech@gmail.com | +91 9404190417 | Sales | Chicago, IL | Pending |
|
David Wilson
|
sales.swarajyainfotech@gmail.com | +91 9404190417 | HR | Boston, MA | Inactive |
|
Lisa Anderson
|
sales.swarajyainfotech@gmail.com | +91 9404190417 | 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 | Tata Consultancy & Retail Logistics | 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 |