Failed to render table in post

(Casey) #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!

(Felix Freiberger) #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.

(Mittineague) #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
(Casey) #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:

(Casey) #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:

(Felix Freiberger) #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
image.png1305x299 34 KB

(Casey) #7

It works!
Thanks a lot. :blush: