CSS for individual tables in a post

Dev
7

If you’re on a recent version of Discourse - as this is a recent change - you can also use data-theme attributes.

For example:

<div data-theme-table="fixed">
	
	<table>
		<thead>
			<tr>
				<th>Col A</th>
				<th>Col B</th>
				<th>Col C</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>A1</td>
				<td>B1</td>
				<td>C1</td>
			</tr>
		</tbody>
	</table>
	
</div>

Or with markdown

<div data-theme-table="fixed">

| Col A | Col B | Col C|
|---|---|---|
| A1 | B1 | C1 |

</div>

Would look like this:

Col A Col B Col C
A1 B1 C1

No difference visually - but can be targeted with CSS like this:

[data-theme-table="fixed"] table {
    background: red;
}

The result is a red background for tables inside divs with the attribute data-theme-table="fixed" but no effect on other tables.

Capture18

So all you need to do is define the CSS once and then use the attributes in posts where you want the styles to apply.

7 Likes