streamlit 中的自定义 html 表格

Question

我正在尝试渲染一个使用 css 样式的自定义 html 表。我可以加载我的表格，但由于某种原因未使用引用的 css 文件。这是我的 html 代码的示例

<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>.

这是我使用 pandas 生成此 html 的方法

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>.
    """
import streamlit as st
import streamlit.components.v1 as components
import pandas as pd

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

这是我的 css 文件，

df_style.css

与我的 Streamlit 应用程序文件位于同一目录中

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

}

这是我如何通过streamlit渲染表格的

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

但是表格只是使用默认的 html 表格样式呈现，而不是引用我的 css。这个stackoverflow问题指出pandas

*.to_html()

“添加了双类

<table class="dataframe mystyle">

，可以在CSS中单独引用，

.dataframe {...} .mystyle{...}

，或一起

.dataframe.mystyle {...}

”，但我仍然无法让streamlit引用我的css文件当我的文件中的 css 类使用任何这些命名约定时。有什么想法吗？考虑到文档中的示例引用了 bootstrap css 文件，这应该是可能的。

编辑：根据streamlit表单上的this post，我能够通过将其放入

static

streamlit文件夹中来渲染CSS。现在的问题是，如果我将所有文件都放在 github 存储库中，CSS 是否仍能正确渲染？

Answer 1

我建议您查看 pandas 风格的 API，它允许您自定义数据框的渲染方式；这比注入 CSS 容易得多。这是一个例子。

import streamlit as st
import pandas as pd
import numpy as np

# Create mock data
np.random.seed(0)
data = pd.DataFrame({
    'A': np.random.randint(1, 100, 5),
    'B': np.random.randint(1, 100, 5),
    'C': np.random.randint(1, 100, 5)
})

st.title("DataFrame Custom Styling Example")

st.write("Original DataFrame:")
st.dataframe(data)

# Highlight max values in each column
styled_max = data.style.highlight_max(color='lightgreen', axis=0)
st.write("DataFrame with Max Values Highlighted:")
st.dataframe(styled_max)

# Highlight min values in each column
styled_min = data.style.highlight_min(color='salmon', axis=0)
st.write("DataFrame with Min Values Highlighted:")
st.dataframe(styled_min)

streamlit 中的自定义 html 表格

问题描述投票：0回答：1

1个回答

最新问题

streamlit 中的自定义 html 表格

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1