I sent most of this past weekend trying to get a nice looking responsive table to work. At first I tried to mess with it from scratch. Then someone recommended I look into Twitter Bootstrap. Wow, am I glad I looked into Bootstrap because that has saved a ton of frustration.

Okay, so I have the general framework but now need to make it look the way I want. I created my own custom CSS file and started “prettying up” the look over the table. I ran into a few things though that Bootstrap did by default that I didn’t like. The two big things were that I wanted the column widths a different size on 980px+ browser windows, and I wanted to get rid of the “padding” (technically a left-margin) between the columns.

So, being myself, I started to customize the Bootstrap file. After a while I realized this was a bad idea. So then I took parts of the Bootstrap CSS and moved (copied) it into my existing CSS file and started to modify things. Well, this got pretty messy quickly.

After sending out a tweet for assistance earlier today my buddy Joseph Guadagno lent a hand and pointed me in a much better direction. What I wound up doing was to revert all of my changes and then start overlapping CSS styles. I’m not sure if that’s the right terminology – I didn’t even know it was an option until today. Basically I’d set something like <div style=”style1 style2″> and both styles would be applied. That was great because I could have my formatting style applied and also the Bootstrap style for the responsive table. This was CSS lesson #1 for me today.

But while that helped clean up the mess I was creating, I still needed to override some settings that were in the Bootstrap CSS file. So I duplicated the same attribute but with a different setting to see whether mine or Bootstrap would take effect. Bootstraps did every time – even when I messed with the order of things. I have no idea what determines who wins a fight like that, but while trying to figure it out, I stumbled upon “!important”. What I found out that was when there are multiple values applied to the same item, you can set “!important” just after the value that you want to take precedence over any other values that might exist. Wow! This was CSS lesson #2 for me today.

So now this was great. I had my responsive table; it looked nice; and I could override the Bootstrap settings that I didn’t like and force them to take effect with my handy new “!important” statement.

Score! Now I wish I could have my weekend back. Can anyone help with that? :)

Brad on Google+