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.

Solution 1

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;
}

Solution 2

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.

Solution 3

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).

Comments

[Freedom_Ben]

Is there a way to add this to the kramdown source without having to specify a template?

[Freedom_Ben]

nm, I just wrapped it in <style>...</style> tags and that did it. Not the most elegant but :shrug:

[Michael]

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.

[Abel Cheung]

Life saver +1. IMHO This would be the proper Kramdown way to handle table styles, and accepted as the best answer for original question.

[Florian Oswald]

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!

[Royi]

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]

@FlorianOswald, Could you show a code snippet of what you did?

[David Jacquel]

@Royi, you can ask a real question for this. Better chances to get an answer.

[Royi]

@DavidJacquel, Have a loos at - stackoverflow.com/a/53351810/195787. I figured it out.

[Timo]

Is it possible to use several classes in {..}? What does the > mean in the scss? Can I omit it?