• 

  Responsive Table that Stacks on Mobile Instead of Horizontal Scroll

  Bootstrap 4

  The default behavior of responsive tables is to have horizontal scrolling. This is a safe solution to cover a broad range of table layouts. But if you have standard data table without a lot of colspans you could try stacking your table rows.

  On mobile, this code snippet copies each thead on each cell and adds a border between each row. This visually chunks the data and makes it easier to digest on mobile without having to scroll to the top of the table to see the table head.

Other Code Snippet Categories

• Buttons

• Cards

• Carousels

Code Tools

• Collapse

Content Sections

• Dropdowns

• Forms

• Grid

• Images

• JavaScript

• Jumbotron

• Lists

• Modals

• Navbars

• Page Layouts

• Social Media

• Tables

• Tabs

• Typography

• Utilities