recursive.codes


The Personal Blog of Todd Sharp

Displaying A Table As Columns And Rows With Bootstrap

Posted By: Todd Sharp on 3/5/2018 1:08 GMT
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.

Image by AlainAudet from Pixabay



Related Posts

Sending Push Notifications from Oracle Notification Service with Oracle Functions and Pushover

Sending Push Notifications from Oracle Notification Service with Oracle Functions and Pushover

The Oracle Notification Service is an extraordinary service. I’ve blogged about it in the past (see the Complete Guide to the Oracle Notification Service...

Tracking & Analyzing Water Usage Data in the Cloud with a Flow Sensor, Microcontroller & Autonomous DB

Tracking & Analyzing Water Usage Data in the Cloud with a Flow Sensor, Microcontroller & Autonomous DB

This past summer, I was lucky enough to get spend some virtual time with some of the awesome interns here at Oracle. It makes me happy to see so many college...

Instance and Resource Principal Authentication With The OCI TypeScript/JavaScript SDK

Instance and Resource Principal Authentication With The OCI TypeScript/JavaScript SDK

In June, we launched the Oracle Cloud Infrastructure (OCI) SDK for TypeScript & JavaScript to enable you to work with all of your favorite cloud...

Note: Comments are currently closed on this blog. Disqus is simply too bloated to justify its use with the low volume of comments on this blog. Please visit my contact page if you have something to say!