Jekyll redcarpet render Table with frame

Question

I had the same problem as in Table not render when use Redcarpet in Jekyll GitHub Pages?

And I used the answer to get table rendering into my github Jekyll page.

But it does not render the frame or lines of the table.

Is there the possibility to get a table output with a frame and lines? And if

My Markdown looks like this:

| Test | Test | Test | 
| -----|:----:|-----:|
| test | test | test |         
| test | test | test |
| test | test | test |
| test | test | test |

And my _config.yml like this:

markdown: redcarpet
redcarpet:
  extensions: [tables]

This works out of the box with your configuration parameters. Did you have some code repository to dig in ? — David Jacquel, May 22 '15 at 16:41
@ErikGillespie you're right. You might fill an answer with this. — David Jacquel, May 22 '15 at 18:54

score 3 · Accepted Answer · answered May 22 '15 at 21:01

The reason it's not drawing any borders is because there are not styles for your table and related elements.

Here's a repo I threw together to demonstrate the styles being applied to tables. You can see the results here.

Create a main.css file in your repository and include it on your HTML pages.

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    {{ content }}
</body>
</html>

Then in main.css you can apply styles to all of your Markdown-generated tables:

table {
    border:#ccc 1px solid;
    border-radius:3px;
}
table th {
    padding:21px 25px 22px 25px;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
}
table tr {
    padding-left:20px;
}
table td {
    padding:18px;
    border-top: 1px solid #ffffff;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

If you already have CSS in your repo then just add the styles and make sure the CSS is being included in your HTML.

Jekyll redcarpet render Table with frame

1 Answers1