# CSS for individual tables in a post
**URL:** https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284
**Category:** Development
**Tags:** css
**Created:** [May 11, 2018, 6:01pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284 "2018-05-11T18:01:20Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [May 11, 2018, 6:01pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/1 "2018-05-11T18:01:21Z")
Is it possible to style tables in a post individually?
Discourse removes all styling elements from HTML in a post.
---
### Author:  [@eatcodetravel](https://meta.discourse.org/u/eatcodetravel)
#### Post date: [May 11, 2018, 6:08pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/2 "2018-05-11T18:08:14Z")
Can you share a screenshot of what you want to do? In discourse you can do pretty much anything you want, but it gets harder the more crazy the idea is
---
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [May 11, 2018, 6:12pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/3 "2018-05-11T18:12:28Z")
I simply want some tables to have a fixed layout, and some auto layout.
I’m referring to tables created with Markdown, BBCode or HTML in composer.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [May 11, 2018, 6:38pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/4 "2018-05-11T18:38:08Z")
If you can’t target them by id or class, by position? eg. instead of main-st → smith, main-st → second-house
What I generally do is go up the DOM until I find an ancestor element with an id, or in lieu of that a few elements with classes, and then go to the child element I want to target. If need be, a “first”, “last” or “nth” pseudo-class should do the job.
> **[Pseudo-classes - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes)**
>
> A CSS pseudo-class is a keyword added to a selector that lets you select elements based on information that lies outside of the document tree, such as a specific state of the selected element(s). For example, the pseudo-class :hover can be used to...
---
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [May 11, 2018, 10:40pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/5 "2018-05-11T22:40:00Z")
I think you mean modifying CSS from the admin panel.
What I’m asking is formatting in the composer window.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [May 12, 2018, 1:13am UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/6 "2018-05-12T01:13:05Z")
You will need to write a plugin that exposes the classes you want to allow users to use to format their tables. Once you do that, they can apply the classes to their posts.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [May 14, 2018, 1:55am UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/7 "2018-05-14T01:55:59Z")
If you’re on a recent version of Discourse - as this is a recent change - you can also use `data-theme` attributes.
For example:
```plaintext
| Col A |
Col B |
Col C |
| A1 |
B1 |
C1 |
```
Or with markdown
```plaintext
| Col A | Col B | Col C|
|---|---|---|
| A1 | B1 | C1 |
```
Would look like this:
| Col A | Col B | Col C |
| --- | --- | --- |
| A1 | B1 | C1 |
No difference visually - but can be targeted with CSS like this:
```plaintext
[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.
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.
---
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [May 14, 2018, 5:28am UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/8 "2018-05-14T05:28:07Z")
This is exactly what I was looking for. Thank you @Johani
---
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [May 19, 2018, 11:52pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/9 "2018-05-19T23:52:06Z")
looking at [white-lister.js.es6](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/white-lister.js.es6#L114-L179), I notice:
```
'div[data-*]', /* This may seem a bit much but polls does
it anyway and this is needed for themes,
special code in sanitizer handles data-*
nothing exists for data-theme-* and we
don't want to slow sanitize for this case
*/
```
does it mean that `div[data-theme-*]` is no longer required and we can simply use `div[data-*]` (e.g. div[data-table-layout])?
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [May 20, 2018, 7:32am UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/11 "2018-05-20T07:32:58Z")
Yes, but I’d say to stick with the -theme- prefix for stuff that’s actually handled by a theme.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [May 21, 2018, 3:24am UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/13 "2018-05-21T03:24:06Z")
Yes, you’re correct @BlackKnob, you can use `div[data-*]` like `div[data-table-layout]` and it would have the same effect.
However, like @riking said earlier, you’re much better off sticking with `div[data-theme-*]` since there might be some work in the future to narrow down whitelisted attributes to `div[data-theme-*]`. When that happens, all of your posts with `div[data-*]` would need to be updated accordingly.
That’s why using `div[data-theme-*]` is recommended here, so that you can stay futureproof.
---
### Author:  [@kaefert](https://meta.discourse.org/u/kaefert)
#### Post date: [December 23, 2019, 8:42pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/14 "2019-12-23T20:42:01Z")
Where do I put the CSS to target the named div I’ve wrapped around the table?
Do I need to create and install a custom theme to be able to use this method of table styling?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [December 26, 2019, 3:52am UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/15 "2019-12-26T03:52:00Z")
Welcome back @kaefert 👋
Yes, I would recommend that you do that.
1. go to `admin/customize/themes`
2. click Install
3. select Create New
4. give it a name and set the type to `component`
5. add your CSS
6. add the component to your active themes by clicking on Add all themes next to the `Include_component_on_these_themes` setting on the component page.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [October 19, 2023, 4:17pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/16 "2023-10-19T16:17:09Z")
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [November 18, 2023, 4:17pm UTC](https://meta.discourse.org/t/css-for-individual-tables-in-a-post/87284/17 "2023-11-18T16:17:25Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.