Tables in Ghost

Developer help
1

I’d like to make a few modifications on how Ghost displays the (markdown) tables, no matter the themes used:

  • wider width (wider than body text, similar to wide photos)
  • centered table within that wide area
  • courier fonts (or at least monospace)
  • font-size 80%

I’m not versed in CSS, but is there a way to use Code injection for this, so that these modifications won’t be altered by updating or switching the theme?

2

Yes, Definately ghost has that option to inject the CSS. Please inject your css in Code inject area. Make sure your CSS wrapped with <style></style> tag

3

There are probably 10 ways to do this, and all of them force you to fight what the page wants you to do. Below is the more straightforward way to do it. To really have it all “centered” absolutely would probably require wrapping the markdown tables in html DIV tags and associating even more CSS, which … Well, you suggested you wanted a relatively simple solution, so here you go!

Try this — stick this in the markdown entry directly at the top, or in the code-injection (header) section in the per post settings (where you set the header for your post, etc). Note, not all computers have “Courier” as one of their installed fonts (it’s proprietary), so I pulled in a free font from Google (“Cousine”). “Liberation Mono” is another good option. If you want, you can move this stuff into the site-level code-injection settings, just be aware it will effect every post if you do that.

<link href="https://fonts.googleapis.com/css?family=Cousine&display=swap" rel="stylesheet">

<style type="text/css">
    table {
        width: 120%;
        margin-right: -1in;
        margin-left: -1in;
        font-family: "Courier", "Cousine", "monospace";
        font-size: 80%;
    }
</style>

Play with those numbers. It depends on your theme, etc.

EXAMPLES

Here are two postings that of the same thing that shows you what they did to my tables. (mind you, my site is somewhat heavily CSS manipulated to begin with).

Before widening the tables:

After widening the tables:

(I will be deleting this post in a week or so)
https://blog.errantruminant.com/p/579bc7f5-7440-4f31-82c3-7c4c8d300d83/

4

It doesn’t seem to work. Here’s the page: https://parsec.ro/antares/ (password is “ghost”).

5

What theme is that? Anyway… I had to brute-force the display element back to “table” and then had to use an “!important” all over the place though the ordering seemed to be correct (the last CSS rule applied should always win, but !important will change that). Some black-magic happening that I don’t understand. Regardless. This worked for me on your site:

    table {
        display: table !important;
        width: 120% !important;
        margin-right: -1in !important;
        margin-left: -1in !important;
        font-family: "monospace" !important;
        font-size: 80% !important;
    }

Hmm… and it seems those margin settings are not needed given your particular theme, they were needed for mine. Experiment away!

By the way, I highly highly recommend taking some time out to learn CSS. And then use it as lightly as possible :slight_smile:

6

It’s the default Casper one, nothing fancy.
Still doesn’t work as intended. Oh well.

10

Hi all,

Any updates on this. I have a large markdown table that is getting cutoff by the default css. The code above did not work.

Thanks!