Page 1 of 1
Tables in WebHelp from Markdown files
Posted: Wed Nov 12, 2025 9:00 pm
by susannecm
I am working on an API documentation that uses Markdown files in a DITAMAP..
So far, I have been using my normal DITA output transformation to create WebHelp from this content.
However, I do not like the appearance of the tables in the output. They only have a single separator line between the header and the rest of the table.
I assume that this is because the Markdown table is converted to a DITA CALS table that lacks rowsep and colsep attributes.
How can I change this without affecting the output for the remaining documentation?
I appreciate your help.
Susanne
Re: Tables in WebHelp from Markdown files
Posted: Thu Nov 13, 2025 10:22 am
by julien_lacour
Hello Susanne,
You can easily customize the tables using custom CSS rules, such as:
Code: Select all
*[class ~= "topic/table"] {
border: 1px solid black;
border-collapse: collapse;
}
.table th[class ~= 'topic/entry'],
.table td[class ~= 'topic/entry'] {
border: 1px solid black;
}
For more information about how to customize WebHelp Responsive output using CSS, please refer to
this topic.
Regards,
Julien
Re: Tables in WebHelp from Markdown files
Posted: Thu Nov 13, 2025 12:10 pm
by Prinnybod
I’ve been struggling with Markdown-to-DITA table formatting too. I wonder if there’s a way to apply a specific style only when the source file is Markdown, without changing the rest of the DITA content.
Re: Tables in WebHelp from Markdown files
Posted: Thu Nov 13, 2025 2:01 pm
by susannecm
Yes, that is also my problem. I want to apply CSS styles selectively.
For example, when the output is generated, could Oxygen apply an outputclass to these tables on conversion from Markdown to DITA?
Re: Tables in WebHelp from Markdown files
Posted: Thu Nov 13, 2025 3:50 pm
by julien_lacour
Hello,
If you need a style for Markdown tables and another for DITA CALS tables, you can add attributes, for example:
Code: Select all
| Header | Header |
|---|---|
| Cell | Cell |
| Cell | Cell |
{outputclass="md-table"}
Then match the new class (copied from the outputclass) in the final output:
Code: Select all
.md-table {
border: 1px solid black;
border-collapse: collapse;
}
.md-table th[class ~= 'topic/entry'],
.md-table td[class ~= 'topic/entry'] {
border: 1px solid black;
}
Regards,
Julien
Re: Tables in WebHelp from Markdown files
Posted: Thu Nov 13, 2025 7:05 pm
by susannecm
Thanks, this worked for me.