Seleccionar página

Code Snippet of the Week 7: [HTML + CSS] Create fully responsive tables using Bootstrap

Making your web responsive could not be enough to mantain complete usability in all devices. It is sometimes necessary not only to adapt our content to the browser’s screen but also modify the information we want to display.

In case of big tables which hold large amount of data, the use that our users make of them could be different if they are in front of a laptop or using their smartphones. This is the reason why we should hide some information (columns) and make a brief summary to our mobile clients.

Embedded code (click on the HTML and CSS tabs to see the code):

 

See the Pen Responsive columns inside table (Bootstrap) by Jon Vadillo (@jonvadillo) on CodePen.light

 

Happy coding!