Displaying A Table As Columns And Rows With Bootstrap

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:

See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=’&amp;amp;amp;amp;amp;amp;lt;a href="&amp;amp;amp;lt;a href="<a href=“https://codepen.io/recursivecodes/pen/ddByzo/'&amp;amp;amp;amp;amp;amp;amp;amp;gt;Bootstrap&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;https://codepen.io/recursivecodes/pen/ddByzo/'&amp;amp;amp;amp;amp;amp;amp;amp;gt;Bootstrap&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt"&amp;amp;amp;gt;https://codepen.io/recursivecodes/pen/ddByzo/'&amp;amp;amp;amp;amp;amp;amp;amp;gt;Bootstrap"&amp;amp;amp;amp;amp;amp;gt;https:/...&amp;amp;amp;lt;/a&amp;amp;amp;gt;”>https://codepen.io/recursivecodes/pen/ddByzo/’&amp;amp;amp;amp;amp;amp;amp;amp;gt;Bootstrap&...</a>; Tables&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; by Todd Sharp (&amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=’&amp;amp;amp;amp;amp;amp;lt;a href="&amp;amp;amp;lt;a href="<a href=“https://codepen.io/recursivecodes'&amp;amp;amp;amp;amp;amp;amp;amp;gt;@recursivecodes&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;https://codepen.io/recursivecodes'&amp;amp;amp;amp;amp;amp;amp;amp;gt;@recursivecodes&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;"&amp;amp;amp;gt;https://codepen.io/recursivecodes'&amp;amp;amp;amp;amp;amp;amp;amp;gt;@recursivecodes&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;...&amp;amp;amp;lt;/a&amp;amp;amp;gt;”>https://codepen.io/recursivecodes’&amp;amp;amp;amp;amp;amp;amp;amp;gt;@recursivecodes&amp;am...</a>) on &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=’&amp;amp;amp;amp;amp;amp;lt;a href="&amp;amp;amp;lt;a href="<a href=“https://codepen.io’&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;https://codepen.io’&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;"&amp;amp;amp;gt;https://codepen.io’&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;"&amp;amp;amp;amp;amp;a...&amp;amp;amp;lt;/a&amp;amp;amp;gt;”>https://codepen.io’&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;a...</a>.

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

See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=’&amp;amp;amp;amp;amp;amp;lt;a href="&amp;amp;amp;lt;a href="<a href=“https://codepen.io/recursivecodes/pen/NyZWyy/'&amp;ampdi;amp;amp;amp;amp;amp;amp;gt;Bootstrap&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;https://codepen.io/recursivecodes/pen/NyZWyy/'&amp;amp;amp;amp;amp;amp;amp;amp;gt;Bootstrap&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt"&amp;amp;amp;gt;https://codepen.io/recursivecodes/pen/NyZWyy/'&amp;amp;amp;amp;amp;amp;amp;amp;gt;Bootstrap"&amp;amp;amp;amp;amp;amp;gt;https:/...&amp;amp;amp;lt;/a&amp;amp;amp;gt;”>https://codepen.io/recursivecodes/pen/NyZWyy/’&amp;ampdi;amp;amp;amp;amp;amp;amp;gt;Bootstrap&am...</a>; Tables&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; by Todd Sharp (&amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=’&amp;amp;amp;amp;amp;amp;lt;a href="&amp;amp;amp;lt;a href="<a href=“https://codepen.io/recursivecodes'&amp;amp;amp;amp;amp;amp;amp;amp;gt;@recursivecodes&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;https://codepen.io/recursivecodes'&amp;amp;amp;amp;amp;amp;amp;amp;gt;@recursivecodes&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;"&amp;amp;amp;gt;https://codepen.io/recursivecodes'&amp;amp;amp;amp;amp;amp;amp;amp;gt;@recursivecodes&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;...&amp;amp;amp;lt;/a&amp;amp;amp;gt;”>https://codepen.io/recursivecodes’&amp;amp;amp;amp;amp;amp;amp;amp;gt;@recursivecodes&amp;am...</a>) on &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=’&amp;amp;amp;amp;amp;amp;lt;a href="&amp;amp;amp;lt;a href="<a href=“https://codepen.io’&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;https://codepen.io’&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;"&amp;amp;amp;gt;https://codepen.io’&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;"&amp;amp;amp;amp;amp;a...&amp;amp;amp;lt;/a&amp;amp;amp;gt;”>https://codepen.io’&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;a...</a>.

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