Failed to render table in post

Support

AI-generated summary

Failed to render table in post discussion summary:

realcasey tried to render a table in a post using HTML and CSS, but it failed to style. fefrei explained that Discourse only allows a limited subset of HTML in posts and suggested using themes to apply custom CSS as an administrator.

fefrei later advised realcasey to add the custom CSS code to the CSS section, not the “Embedded CSS” section, and to target a single topic by its ID for specificity.

Mittineague also suggested using Markdown to create tables, which realcasey found to be a convenient alternative. Ultimately, realcasey successfully applied the custom CSS with fefrei’s help.

1

I try this script in post:

<div>
<style>
    .dataframe thead tr:only-child th {
        text-align: right;
    }

    .dataframe thead th {
        text-align: left;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }
</style>
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>2007-01-07</td>
    </tr>
    <tr>
      <th>1</th>
      <td>2007-01-14</td>
    </tr>
    <tr>
      <th>2</th>
      <td>2007-01-21</td>
    </tr>
    <tr>
      <th>3</th>
      <td>2007-01-28</td>
    </tr>
    <tr>
      <th>4</th>
      <td>2007-02-04</td>
    </tr>
  </tbody>
</table>
</div>

But the table failed to be styled.

Could you give me some instructions?

Thanks!

2

Discourse only allows a limited subset of HTML in posts, use of the <style> tag is not allowed.

If you’re an administrator in your Discourse instance, you could use themes to apply custom CSS to the site.

3

Have you considered using Markdown? eg.

||date|
|:---|:---:|
|0|2007-01-07|
|1|2007-01-14|
|2|2007-01-21|
|3|2007-01-28|
|4|2007-02-04|
date
0 2007-01-07
1 2007-01-14
2 2007-01-21
3 2007-01-28
4 2007-02-04
4

Thank you @fefrei!

I am the admin of that site. If it does not interrupt you too much, could you tell me where to apply the custom CSS, “CSS” or “Embedded CSS”? I tried adding the following script to “Embedded CSS” just now, but it seems not to work.

.dataframe thead tr:only-child th {
        text-align: right;
    }
.dataframe thead th {
        text-align: left;
    }
.dataframe tbody tr th {
        vertical-align: top;
    }

Thanks again! :+1:

5

@Mittineague Thanks!

It is more convenient to create table with Markdown than HTML. Actually, I’d like to add some custom style to the plain table, so the CSS may be a better choice.

Have a good day! :smiley:

6

Your CSS code should go into the CSS section :slight_smile:

You may want to make sure that the CSS is only applied to the post you want. You can use this attribute to target a single topic by its ID:

image
image1305×299 34 KB

7

It works!
Thanks a lot. :blush: