How to apply CSS to pn.pane.HTML?

Panel
1

I have a HTML table: myTable = pn.pane.HTML("...")

I now want to apply the following CSS to this table:

  .text {
    text-align: left;
  }

  .number {
    text-align: right;
  }

I tried defining the above CSS code snippet as customStyle and passing the argument styles=customStyles, but this produces the following error:

ValueError: Dict parameter 'styles' value must be an instance of dict, not '\n.text {\n text-align: left;\n}\n.number {\n text-align: right;\n}\n'.

2

Try to use stylesheets=["..."] which can be pasted like CSS

3

This does not produce an error, but also does nothing visually

4

I usually check if it’s refreshing by using background: red

5

Great idea! Indeed nothing red is shown.

6

For reference:

https://panel.holoviz.org/how_to/styling/apply_css.html#stylesheets

7

So I looked at the HTML in a browser using inspect element. I want to give every HTML object of class “simpletable” a CSS style. I managed to left align everything in the table using:

customStyles = """
    .simpletable{
            text-align: left;
    }
"""

But now I want to apply different aligning for text and numbers. I tried:

customStyles = """
    .simpletable{
            
        .text {
            text-align: left;
        }
        
        .number {
            text-align: right;
        }
    }
"""

But the alignment of the table does not change.

8

I am not sure that’s valid CSS.

What I usually do is copy the element’s class to ChatGPT and explain what I’m trying to do to get the proper CSS.

1 Like