Rendering custom html table

Custom Components
1

I am trying to render a custom html table that is styled with css. I can get my table loaded, but the referenced css file is not used for some reason. Here’s an example of my html code

<html>
    <head><title>HTML Pandas Dataframe with CSS</title></head>
    <link rel="stylesheet" type="text/css" href="df_style.css"/>
    <body>
        <table border="1" class="dataframe mystyle">
  <thead>
    <tr style="text-align: center;">
      <th></th>
      <th>team</th>
      <th>player</th>
      <th>week</th>
      <th>year</th>
      <th>x</th>
      <th>y</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td><img src="https://a.espncdn.com/i/teamlogos/nfl/500/kc.png" width="40" style="text-align: center"></td>
      <td><img src="https://static.www.nfl.com/image/private/f_auto,q_auto/league/xw0jhb7zeobj4bkxfpwg" width="75" style="text-align: center"></td>
      <td>1</td>
      <td>2020</td>
      <td>15</td>
      <td>10</td>
    </tr>
  </tbody>
</table>
    </body>
    </html>.

here is how I generated this html using pandas

    html_string = """
    <html>
    <head><title>HTML Pandas Dataframe with CSS</title></head>
    <link rel="stylesheet" type="text/css" href="df_style.css"/>
    <body>
        {table}
    </body>
    </html>.
    """
   html_string.format(
            table=df.to_html(
                classes="mystyle",
                escape=False,
                formatters=format_dict,
                justify="center",
            )
        )

and here is my css file, df_style.css

.mystyle {
    font-size: 11pt;
    font-family: Arial;
    border-collapse: collapse;
    border: 1px solid rgb(237, 69, 69);

}

and here is how I rendered the table via streamlit

    components.html(
        html_string.format(
            table=c1.to_html(
                classes="mystyle",
                escape=False,
                formatters=format_dict,
                justify="center",
            )
        ),
    )

but the table just renders with default html table styling rather than referencing my css. This stackoverflow question notes that pandas *.to_html() “adds dual classes <table class="dataframe mystyle"> which can be referenced in CSS individually, .dataframe {...} .mystyle{...} , or together .dataframe.mystyle {...}” but I still can’t get the streamlit to reference my css file when using any of those naming conventions for the css classes in my file. Any ideas? This should be possible considering the example in the documentation references a bootstrap css file.

Edit: Calling the amazing @andfanilo :slight_smile:

EDIT again: per this post, I was able to get the css to render by putting it in the static streamlit folder. Now the question is will the css still render correctly if I just have all my files in a github repo?

2

Hi @bismo,

Thanks for posting!

Re:

Now the question is will the css still render correctly if I just have all my files in a github repo?

The best way to answer this is to just test it out – have you tried putting your files in a GitHub repo to see if the CSS still renders properly?

Caroline :balloon:

3

Hi @Caroline, I finally finished my app and deployed it, but the css isn’t rendering, even when referencing it correctly. How can I make CSS from a file render in a deployed app?

I am trying to render custom css in a deployed streamlit app. I have created a custom html table and am displaying it with components.html() (API reference here).

The thing is, I can get this css to render locally when in development by putting my css file in streamlit’s static folder on my computer and referencing it like so in my custom table html:

<link rel=“stylesheet” href=table_style.css” type=“text/css”/>

And it works just fine. I have finished my app and deployed it, changing the href to where the css file lives in my streamlit app’s repo:

<link rel=“stylesheet” href=assets/css/table_style.css” type=“text/css”/>

but no css was rendered. I also tried

main/assets/css/table_style.css

and then tried the full path

_user_/_repo_/main/assets/css/table_style.css

and using the raw link to the css file itself

https://raw.githubusercontent.com/_user_/_repo_/main/assets/css/table_style.css

yet the css doesn’t render when deployed with any of these attempts. There has to be a way to get this css referenced when in production… here is an example of someone with a very similar problem but not a very straightforward answer. I’ve tried every option I could think of in trying to get my custom css rendered when deployed but nothing seems to work. Help would be greatly appreciated, as I spent a lot of time working on and designing my app around this css, and it would basically be useless if it can’t be rendered in deployment (which I don’t know why it wouldn’t be able to). Thanks!

4

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.