The Personal Blog of Todd Sharp

Displaying A Table As Columns And Rows With Bootstrap

Posted By: Todd Sharp on 3/5/2018 6:08 UTC
Tagged: Bootstrap, JavaScript

This one might fall into the "duh" category, but I recently found myself with a unique situation.  I was consuming some HTML from a third party and the size of the content inside a <table> was quite wide.  The original solution was to set the overflow to allow for horizontal scrolling, but the results left a bit to be desired so I was asked to come up with a different solution.  It's always tricky when displaying content where you don't control the markup, but that's part of the fun of being a developer I supposed.  

For demo purposes, let's see the original content looked like so:

My original solution was to set all of the <td> to display: block; which solved the horizontal scrolling problem, but it was still a bit rough on the eyes.  That's when it hit me - there shouldn't be anything stopping me from using Bootstrap's row and col-* classes on the

In the end I was able to use a bit of JavaScript to manipulate the incoming markup to make a much more pleasing layout.