Learn how I hacked the SCSS for my blog to get tables to look right, without breaking everything else (I hope).
Here is a sample table.
It is written in my blog source via this source text:
1 2 3 4 5
The default octopress presentation of such a table just smushes the text into a grid, but does not render the division of the header, rows, columns, nor cells in any way (no borders, no colors, et cetera).
After hearing a colleague complain about how bad that default presentation looked compared to what Github does with such tables, I decided to try to figure out how to fix it.
First, I opened up gist.github.com and put my table into a gist there
.md) extension, so I could see what github does to render
By hitting “Inpsect Element” and looking at the
cascading style sheet (CSS) settings for the
td elements,Namely, the
I identified the things that needed to change.
The one trick I will note, since its a pretty cute hack on the
part of CSS, is the way it uses the
:nth-child selector to
differentiate the even rows from the odd rows when deciding on the
You can see the specific changes, with comments, in the
file transcribed below; I will not describe the effect of each one
My usual tactic when doing this sort of interactive exploration of CSS is to toggle each such setting on and off in the reference document (the rendered gist, in this case), to see the effect of the setting on the overall document, and then manually enter the setting into a similarly inspected element in the target document where I am trying to recreate the effect.
To limit the effect of the styling to just the tables that appear in a
blog post, I made sure that each CSS customization was prefixed by
.entry-content; I had determined via inspection that each block
entry is surrounded by a
So, I added the customizations to my
regenerated my site, and looked at the result. It was quite promising,
except for one big problem: I had changed the formatting for all
tables, including the ones that are used to render code snippets!
I will admit that I do not actually know the semantics of an
“inherit” setting. I assume it means something like “inherit the
value from your parent element, based on the context of where you
appear in the document.”
So I further revised the CSS so that, when you are in the context of a
class="code" underneath a
class="entry-content", then you should
just inherit the setting, rather than using the values specified here.
Anyway, that seemed to work great!
So here’s my customized
_better_tables.scss file (which is
imported into the aformentioned
_styles.scss file via
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32