Different table styles in same source document

user_150435 0
Viewed 283

I am using Pandoc 2.10.1 to convert from Markdown to DOCX. My source file has 2 tables in it that should be styled differently. I know that:

  • The default style for tables is Table,
  • I can provide a reference document where styles will be gleaned from
  • I can modify the Table style in this style reference doc
  • I can add my own table styles to this reference document

What I can't figure out though is how one table should have the default Table style and the other should have MyGoodTable style. I have tried doing nothing to one table and surrounding the other in a fenced div like this:

:::{custom-style=MyTableStyle}

+-----+-----+-----+
| A   | B   | C   |
+=====+=====+=====+
| 10  | 11  | 12  |
+-----+-----+-----+
| 20  | 21  | 22  |
+-----+-----+-----+
| 30  | 31  | 33  | 
+-----+-----+-----+

:::

This didn't work, however, even though my reference document has MyTableStyle as a table style.

So, how can one table in a document have one style and another table in the same document have another style?

pandoc word markdown
1 Answers

This is actually a solution for Python-Markdown, not for DOCX. But maybe it can be adapted somehow or be useful for those who found this question by its title.

The default table stile: 

Item No | Name | Description | Price
--------|------|-------------|------
1       | Chair | Kitchen chair | 101.50
2       | Table | Kitchen table | 450.00

The "plated" table style:

<div class="tablePlated"></div>

|Item No | Name | Description | Price|
|--------|------|-------------|------|
|1       | Chair | Kitchen chair | 101.50|
|2       | Table | Kitchen table | 450.00|

And the "gridded" table style:

<div class="tableGridded"></div>

Item No | Name | Description | Price
--------|------|-------------|------
1       | Chair | Kitchen chair | 101.50
2       | Table | Kitchen table | 450.00

Here are the CSS rules:

table {
    font-size: 16px;
}

td, th {
    padding: 7px 14px;
}

div.tablePlated+table {
    border-spacing: 1px;
    border-collapse: separate;
}

div.tablePlated+table td, div.tablePlated+table th {
    background-color: lightblue;
}

div.tableGridded+table {
    border-spacing: 0;
    border-collapse: collapse;    
}

div.tableGridded+table td, div.tableGridded+table th {
    border: solid 1px dodgerblue;
}

And here is the result:

enter image description here

user_38684540
Related