Failed to render table in post

[realcasey (Casey)]

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!

[fefrei (Felix Freiberger)]

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.

[Mittineague]

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

Create a table using markdown on your Discourse forum

Create a table on your Discourse forum With the new markdown engine (since the version 1.9.0 b4), creating a table is really easy. For this howto, we will use a table with three columns. You can create a table with as many columns as you want but keep in mind that the width of your post is limited, and a large table can be pretty ugly on mobile. The base of a table is really simple, each | character will represent one column. Between two | you can add the content that you want. You need to st…

[realcasey (Casey)]

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!

[realcasey (Casey)]

@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!

[fefrei (Felix Freiberger)]

Your CSS code should go into the CSS section

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:

[realcasey (Casey)]

It works!
Thanks a lot.