• 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.

Looking for something else?

Suggest or contribute a code snippet to be added to the library.

Other Code Snippet Categories