Responsive Tables

Always Responsive
Horizontal Scrolling Table

Use .table-responsive to enable horizontal scrolling on all screen sizes

#First NameLast NameUsernameEmailPhoneAddressCityCountryZip CodeStatusActions
1SarahJohnson@sarahjsarah.johnson@example.com+1 (555) 123-4567123 Main StreetNew YorkUnited States10001Active
2MichaelChen@mchenmichael.chen@example.com+1 (555) 234-5678456 Oak AvenueSan FranciscoUnited States94102Active
3EmilyDavis@emilydemily.davis@example.com+1 (555) 345-6789789 Pine RoadChicagoUnited States60601Pending
4DavidWilson@dwilsondavid.wilson@example.com+1 (555) 456-7890321 Elm StreetBostonUnited States02101Inactive
Breakpoint Responsive Tables
Responsive SM

Use .table-responsive-sm for < 576px

#NameEmailRole
1Sarah Johnsonsarah@example.comAdmin
2Michael Chenmichael@example.comEditor
3Emily Davisemily@example.comViewer
Responsive MD

Use .table-responsive-md for < 768px

#NameEmailRole
1Sarah Johnsonsarah@example.comAdmin
2Michael Chenmichael@example.comEditor
3Emily Davisemily@example.comViewer
Responsive LG

Use .table-responsive-lg for < 992px

#NameEmailRole
1Sarah Johnsonsarah@example.comAdmin
2Michael Chenmichael@example.comEditor
3Emily Davisemily@example.comViewer
Responsive XL

Use .table-responsive-xl for < 1200px

#NameEmailRole
1Sarah Johnsonsarah@example.comAdmin
2Michael Chenmichael@example.comEditor
3Emily Davisemily@example.comViewer
Stacked Table Pattern
Mobile-Friendly Stacked Layout

Table transforms to card-like stacked layout on mobile devices

Order IDCustomerProductAmountDateStatus
#ORD-7245James RodriguezMacBook Pro 16"$2,499.00Jan 15, 2026Delivered
#ORD-7244Emma ThompsoniPhone 15 Pro Max$1,199.00Jan 14, 2026Processing
#ORD-7243Robert KimAirPods Pro 2$249.00Jan 14, 2026Shipped
#ORD-7242Sophia MartinezApple Watch Ultra 2$799.00Jan 13, 2026Cancelled
#ORD-7241William BrowniPad Pro 12.9"$1,099.00Jan 12, 2026Delivered
Column Priority Pattern
Priority-Based Column Visibility

Less important columns are hidden on smaller screens using responsive utility classes

NameEmailPhoneDepartmentLocationStatusActions
User
Sarah Johnson
sarah.johnson@example.com+1 (555) 123-4567EngineeringNew York, NYActive
User
Michael Chen
michael.chen@example.com+1 (555) 234-5678MarketingSan Francisco, CAActive
User
Emily Davis
emily.davis@example.com+1 (555) 345-6789SalesChicago, ILPending
User
David Wilson
david.wilson@example.com+1 (555) 456-7890HRBoston, MAInactive
User
Lisa Anderson
lisa.anderson@example.com+1 (555) 567-8901FinanceAustin, TXActive

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

ProjectTeam LeadProgressDeadlineBudgetStatus
Website Redesign
UI/UX, Development
User
Sarah Johnson
85%
Feb 28, 2026$45,000On Track
Mobile App Development
iOS, Android
User
Michael Chen
45%
Apr 15, 2026$120,000At Risk
Cloud Migration
Infrastructure
User
Emily Davis
100%
Jan 10, 2026$75,000Completed
Website Redesign

UI/UX, Development

On Track
UserSarah Johnson
Progress85%
Feb 28, 2026 $45,000
Mobile App Development

iOS, Android

At Risk
UserMichael Chen
Progress45%
Apr 15, 2026 $120,000
Cloud Migration

Infrastructure

Completed
UserEmily Davis
Progress100%
Jan 10, 2026 $75,000
Overflow Indicator
Scroll Indicator Table

Gradient fade indicates more content is available on scroll

Invoice #ClientProjectAmountIssue DateDue DatePayment MethodStatusActions
INV-2024-001Acme CorporationWebsite Development$12,500.00Jan 01, 2026Jan 31, 2026Bank TransferPaid
INV-2024-002Tech Innovations LtdMobile App Design$8,750.00Jan 05, 2026Feb 04, 2026Credit CardPending
INV-2024-003Global Services IncCloud Infrastructure$25,000.00Jan 10, 2026Feb 09, 2026Bank TransferOverdue
INV-2024-004StartUp VenturesBrand Identity$5,200.00Jan 12, 2026Feb 11, 2026PayPalPaid
INV-2024-005Enterprise SolutionsSecurity Audit$15,800.00Jan 15, 2026Feb 14, 2026Bank TransferProcessing
Sticky First Column
Fixed First Column on Scroll

First column stays visible while scrolling horizontally

EmployeeQ1 SalesQ2 SalesQ3 SalesQ4 SalesTotal SalesCommissionBonusPerformance
User
Sarah Johnson
$125,000$142,500$138,000$165,000$570,500$28,525$15,000Excellent
User
Michael Chen
$98,000$112,000$105,500$128,000$443,500$22,175$10,000Good
User
Emily Davis
$87,500$92,000$88,500$95,000$363,000$18,150$7,500Average
User
David Wilson
$156,000$175,500$168,000$192,000$691,500$34,575$20,000Top Performer
User
Lisa Anderson
$72,000$68,500$75,000$82,000$297,500$14,875$5,000Below Target
Responsive Classes Reference
Bootstrap Responsive Table Classes

Quick reference for table responsive utilities

ClassBreakpointDescription
.table-responsiveAlwaysHorizontal scrolling on all screen sizes
.table-responsive-sm< 576pxHorizontal scrolling below small breakpoint
.table-responsive-md< 768pxHorizontal scrolling below medium breakpoint
.table-responsive-lg< 992pxHorizontal scrolling below large breakpoint
.table-responsive-xl< 1200pxHorizontal scrolling below extra-large breakpoint
.table-responsive-xxl< 1400pxHorizontal scrolling below extra-extra-large breakpoint