Description

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.

HTML

CSS

JS