Search code examples
htmlmarkdownpandocgithub-flavored-markdown

HTML Grid Tables with Pandoc


I want to convert a markdown that includes a table to HTML. The table should have a grid.

Markdown:

| Column A | Column B |
|:--------:|:--------:|
|    1     |    2     |
|    3     |    4     |

pandoc command that I tried: pandoc -t html5 -f gfm -o output.html tmp_markdown.md

This results in an HTML table without a grid:

<table>
<thead>
<tr class="header">
<th style="text-align: center;">Column A</th>
<th style="text-align: center;">Column B</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: center;">1</td>
<td style="text-align: center;">2</td>
</tr>
<tr class="even">
<td style="text-align: center;">3</td>
<td style="text-align: center;">4</td>
</tr>
</tbody>
</table>

Can I adjust the style of the table?


Solution

  • There's no option in Markdown, but you could try to add a CSS snippet in your Markdown file:

    <style>
    table { border-collapse: collapse; }
    th, td { border: solid black 1px; padding: 0 1ex; }
    </style>
    

    This will add solid black borders around all table cells, creating a grid.