💸 Reduce costs by consolidating proprietary analytics & reporting software to open-source & Dash.
Challenge us to replace your analytics with Dash and reduce costs.

Newlines within html.Th and html.Td cells

I am trying to place newlines within html.Th and html.Td cells (ordinary table, not a DataTable).
comes out textually. Searching has led me to comments suggesting to use \n, Markdown, and CSS, but I haven’t found what anything that does the trick. Is this possible?

If you use \n, then you’ll need to apply the CSS property whiteSpace: pre-line, see https://developer.mozilla.org/en-US/docs/Web/CSS/white-space or https://css-tricks.com/almanac/properties/w/whitespace/. You can also inject html.Br() tags to inject breaks or you can wrap each new line its own html.Div or html.P (or any “block-level” element: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) but that can be overkill if you just need some new lines!

The reason why folks recommend Markdown is that the markdown component will break apart your string of text into multiple html.P elements, which naturally case a vertical break. Using \n and whiteSpace can be an easier way to do this.

A similar issue is “word wrapping” which involves wrapping a single line of text into multiple lines of text “automatically” (i.e. if you don’t have your own new lines in it). For that use case, see “word-break”: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break & https://css-tricks.com/where-lines-break-is-complicated-heres-all-the-related-css-and-html/.
The DataTable docs have some nice examples too, which would apply to html.Table as well: https://dash.plotly.com/datatable/width

thanks Chris, after a few unsuccessful tries, I did get it to work with white-space: pre-line