Get dirty with CSS table code!
*Caveat: This code does NOT work below IE 8 so I have gathered. So if you need full compatibility, you’ll have to do this table thing other ways…
Not too long ago, I was in a complete bind over how to display something in divs to keep my responsive design from breaking, yet get get it to line up smoothly. With CSS, there’s always “issues” with containers and all that, position absolute, position relative, inline block, etc. Anyway, it got me digging to figure out how to do the whole table thing in CSS nice and clean so I could get a decent responsive theme to display some data correctly.
While I DID find a fairly exhaustive piece here on creating css tables and one also more geared towards the “how do I do it?” angle of creating css tables, there’s really only a FEW elements I really needed. Here’s what they are and how to use them…
Let’s create a CSS table!
The basics in your style.css file (or appropriate child style sheet)
Let’s just create some demo generic classes for this part. Obviously you will want to expand this for your specific usage and there ARE columns available as well. Follow the links above for heavier duty CSS examples and settings for your CSS tables.
.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.half { width:50%; padding:5px; }
.full { width:100%; }
And then dropping it into the html… be it a text widget, page or post content or in one of your php files as needed…
I’ve used the half and full just so you can see how the thing can be used to emulate those tables that I SOOOO used to love. According to the digging I did, browsers are forgiving if you leave off the “tr” class and will assume that is what you mean if you have the cells in there. Didn’t try it as I like the nice neat orderly “old school” indentations and all that. These really are just embedded div containers in div containers, but it works well. There are other ways to accomplish simple tabling, but for now? This method makes my life a WHOLE lot easier. Of course you can use IDs in there for specific styling, but this just shows some nice generic, use ’em everyday type classes suitable for many purposes.
Again, follow the links above for more exhaustive features and details if you need them!
Follow
