Sometimes we have tabular data that do not go along well with mobile by default.
One of the approaches can be putting tables in a wrapper DIV to make them scroll horizontally on smaller devices as proposed by Bootstrap. But I’m not a big fan of it as the scrollbars are almost hidden on mobile devices and there are chances that user oversight them.
The other approach is to change the display of table on small device to display entire data on screen without scrollbar and that is what I’m going to demonstrate now. To accomplish that, I used the one of the underused CSS property content: attr(value string)
.