CSS for individual tables in a post

개발
1

Is it possible to style tables in a post individually?
Discourse removes all styling elements from HTML in a post.

2

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

3

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.

4

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.

5

I think you mean modifying CSS from the admin panel.
What I’m asking is formatting in the composer window.

6

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.

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.

8

This is exactly what I was looking for. Thank you @Johani

9

looking at white-lister.js.es6, 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])?

11

Yes, but I’d say to stick with the -theme- prefix for stuff that’s actually handled by a theme.

13

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.

14

테이블을 감싸기 위해 만든 이름이 지정된 div를 대상으로 하려면 CSS를 어디에 넣어야 하나요?
이러한 테이블 스타일링 방법을 사용하려면 커스텀 테마를 만들고 설치해야 하나요?

15

@kaefert 님, 다시 오신 것을 환영합니다! :wave:

네, 그렇게 하시는 것을 추천드립니다.

  1. admin/customize/themes로 이동합니다.
  2. Install을 클릭합니다.
  3. Create New를 선택합니다.
  4. 이름을 지정하고 유형을 component로 설정합니다.
  5. CSS를 추가합니다.
  6. 컴포넌트 페이지의 Include_component_on_these_themes 설정 옆에 있는 Add all themes를 클릭하여 현재 활성화된 테마에 해당 컴포넌트를 추가합니다.