Jekyll & KramDown - How to Display Table Border

vancexu picture vancexu · Mar 2, 2015 · Viewed 16.3k times · Source

I am using Jekyll default kramdown. I have a table showed using

surround text, etc.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

surround text...

But the table does not have border. How to show the border.

Answer

MikeBRal picture MikeBRal · Apr 19, 2016

I was able to assign a style class to a markdown table this way. It gives a table with a black line border and border between the cells.

Markdown example: In file hello-world.md

| Item | Description | Price |
| --- | --- | ---: |
| item1 | item1 description | 1.00 |
| item2 | item2 description | 100.00 |
{:.mbtablestyle}

SCSS in _base.scss file in /_sass/ directory

.mbtablestyle {
        border-collapse: collapse;

   > table, td, th {
        border: 1px solid black;
        }
}

This was in jekyll version 3.1.2 which uses Kramdown with an IAL. The IAL is inside { } and must be right before or right after the block it is assigned to in the markdown file, no blank lines between them.