Jekyll & KramDown - How to Display Table Border

Question

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.

score 30 · Answer 1 · answered Apr 19 '16 at 13:23

30

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.

answered Apr 19 '16 at 13:23

MikeBRal

449
5
5

1

This was a life saver! I knew I didn't have a border because no style was being applied, but for the life of me I couldn't figure out how to get kramdown to apply a style to the table. Was just getting ready to switch to HTML for the table when google finally got me here (tried quite a few searches before getting here). As far as I can tell this isn't in the Kramdown documentation. – Michael May 27 '16 at 21:02
Life saver +1. IMHO This would be the proper Kramdown way to handle table styles, and accepted as the best answer for original question. – Abel Cheung Nov 10 '16 at 14:50
On a recent jekyll build the entire bootstrap css is included. I achieved the same as you by just saying `{:.table-striped}` below the table - no need to define a new class at all! – Florian Oswald Jun 20 '18 at 08:07
@FlorianOswald, Could you show a code snippet of what you did? – Royi Nov 17 '18 at 13:07
Is it possible to use several classes in {..}? What does the `>` mean in the scss? Can I omit it? – Timo Feb 11 '21 at 18:43

score 23 · Accepted Answer · answered Mar 02 '15 at 12:23

23

Minimum table styling is

table{
    border-collapse: collapse;
    border-spacing: 0;
    border:2px solid #ff0000;
}

th{
    border:2px solid #000000;
}

td{
    border:1px solid #000000;
}

answered Mar 02 '15 at 12:23

David Jacquel

51,670
6
121
147

Is there a way to add this to the kramdown source without having to specify a template? – Freedom_Ben Apr 28 '15 at 23:58
2

nm, I just wrapped it in `` tags and that did it. Not the most elegant but :shrug: – Freedom_Ben Apr 29 '15 at 00:16
For images one can do something like `![](https://i.imgur.com/AFCCk6C.png){:class="center-img"}`. How could one link `{:class="some-class"}` to a table in KarmDown? – Royi Nov 17 '18 at 13:06
@Royi, you can ask a real question for this. Better chances to get an answer. – David Jacquel Nov 17 '18 at 14:21
@DavidJacquel, Have a loos at - https://stackoverflow.com/a/53351810/195787. I figured it out. – Royi Nov 17 '18 at 14:45

score 2 · Answer 3 · answered Nov 17 '18 at 13:46

I managed to do something like this:

{:class="table table-bordered"}
| Tex Space     | Blue Space        | Lambda            |
|-------------- |----------------   |------------------ |
| sXYZ          | sBlue             | sXYZ abcde fghy   |
| Jaobe XTZ     | Blue Game 5.2     | 5.2               |

KramDown used the CSS of Table / Table Bordered (For instance it is defined in Bootstrap).

score 0 · Answer 4 · answered Nov 20 '18 at 12:55

0

i did just

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

answered Nov 20 '18 at 12:55

Florian Oswald

5,054
5
30
38

Jekyll & KramDown - How to Display Table Border

4 Answers4