CSS for Markdown only

[marketemp]

I have a giant multi-page Dash app written with many tables. Within my assets/css file I have td defined without a border as I prefer that for the table styling of the app.

However when I use dcc.Markdown, the same styles are utilized and documentation oriented tables look terrible without the border. Adding border: 1px; to my td definition puts a border around the markdown tables that I want but then extends into the styling of my app pages.

Is there any way to define css, or unique style definitions for the markdown pages only? Or any way to define and apply a style such as td-markdown?

[stu]

Without using selector?
Please follow this below.

How to write a Minimal Reproducible Example (MRE)

Adding a minimal reproducible example to your questions will help attract community members to answer your question. The goal of writing a MRE is to allow other members of the community to run the code on their computers and “reproduce” the error, so that they can best help you. Please make sure that your MRE includes data and that the code is correctly pre-formatted. To preformat, copy and paste the code in your post and then click on </> (Preformatted text), as shown on the image: [pre-for…

[AnnMarieW]

Hi @marketemp

Try defining a class with the style for your markdown tables. For example:

.md-table table {
     border-collapse: collapse;
}

.md-table th, .md-table td {
  border: 1px solid;
}

Then apply this class to the dcc.Markdown() or any container that you want this style applied to

dcc.Markdown("""
| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |
    
""", className="md-table")

[marketemp]

Thanks @AnnMarieW that was exactly what I needed.

Not to get this question too fancy, but I am using < br / > (minus the spaces, made a newline in the forum post) for newlines within my table cells and now those are text. Is there any way to retain that or should I just live without them. Having that border back and understanding how to style, any more if necessary will be a big help.

[AnnMarieW]

Yes, you can use

dcc.Markdown(...., dangerously_allow_html=True)

However, you should be aware that this can introduce security risks - For more information see:

Writing Secure Dash Apps - Community Thread

Hey folks – Here’s a community thread to kick off security-related patterns & concerns when writing Dash apps. The Dash framework itself is architected in a way to avoid many security issues outright (like many XSS issues encountered when rendering arbitrary HTML) and our commercial Dash Enterprise platform provides strict security controls beyond the application code (with authorization, authentication, sandboxing apps in containers away from the host server, security audits, and more). Howe…

If you are displaying trusted data, this shouldn’t be a problem, but if you are displaying data from user input or extracted from a large database, there is a potential to create an XSS vulnerability

[marketemp]

thanks @AnnMarieW now my Markdown is perfect.

I have used dangerously_allow_html=True in another project, creating simple enormous tables that takes forever with the html.Table,Tr,Td calls so I am aware of of it. Glad we got this working and it was a Dash lesson and not just a CSS lesson!