Wrap markdown tables with <div>

support
1

I found the method below. Is it still valid?

2

Why do want to wrap tables in a div? Or to put it another way, what are you trying to achieve?

3

It is for styling purposes. I don’t want to use shortcodes for this. (I ran a quick test and the method above works).

4

I was just wondering if you could style the table element itself with…

Name|Type
:--|:--
Spot|Dog
Felix|Cat
{.my-class}
5

I already do that, but I have some existing tables (in the tens or hundreds) that I created before that use a different format. For those, I wrapped them initially with a div, but I lost that after converting them to markdown. (Specifically, I need to apply display: block class on the whole table).

6

Why? A table is a block element already: display - CSS: Cascading Style Sheets | MDN

And if you absolutely need display:block on all tables, why not use a rule like

table {display: block};

in your CSS? If that’s too broad for you, you could use a not pseudo-selector to select only those table elements not children of a div already: :not | CSS-Tricks - CSS-Tricks

1 Like
7

Trust me, I tinkered with CSS for hours to get this to work. But it is more of wanting automatically sized widths on columns and scrollable on smaller widths. Targeting the table directly does not work unless I wrap the table inside a division.

8

Then your css is incorrect. You can absolutely target a table element directly to apply styles.

1 Like
9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.