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.

Image by AlainAudet from Pixabay