Creating 2 tables in the same line

Hey everyone,

does anyone know whether it’s possible to create 2 tables in the same line? Like having one on the left and one on the right side?

Left Side

It’s not possible by default, but can be achieved by creating two tables that are wrapped in a div that has a data attribute. That data attribute can then be targeted in your site’s theme to create a two column table. Here’s a basic example. I’m far from a CSS expert, so adjust the CSS to suite your needs.

Raw post content:

<div data-two-column-table>

|foo|bar|
|---- | ----|
|this|that|

</div>

<div data-two-column-table>

|foo|bar|
|---- | ----|
|this|that|

</div>

Theme CSS (note that it’s targeting the .md-table div that Discourse wraps tables in:

div[data-two-column-table] .md-table {
    width: 50%;
    display: inline-block;
    float: left;
}

Expected output:

One possible downside of styling tables in this way is that the styles will not be preserved in emails sent from the site.

3 Likes

I see. Thanks for letting me know!