如何为HTML表格行添加带圆角的高亮矩形边框？

问题描述 #

我正在使用Streamlit创建表格，需要为表格行添加带圆角的矩形边框，用绿色边框标记活跃用户，红色边框标记非活跃用户。现有参考的HTML/CSS示例如下，请问如何在Streamlit中实现该效果？

参考示例CSS

td {
  padding: 5px;
  text-align: center;
  border: 1px solid green;
  /* Light border for all cells */
}

/* Apply rounded corners to the first and last cells in each row */
tr td:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

tr td:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

参考示例HTML

<table>
  <tr class="highlighted">
    <td>Pellentesque</td>
    <td>$120,146</td>
    <td>0.007</td>
    <td>5.24</td>
    <td>$99,225</td>
    <td>24.59%</td>
  </tr>
  <tr>
    <td>Nunc vestibulum</td>
    <td>$85,493</td>
    <td>0.006</td>
    <td>3.57</td>
    <td>$120,146</td>
    <td>35.07%</td>
  </tr>
  <tr class="highlighted">
    <td>Mauris risus</td>
    <td>$99,225</td>
    <td>0.009</td>
    <td>5.31</td>
    <td>$85,493</td>
    <td>40.34%</td>
  </tr>
</table>

解决方案 #

Streamlit原生表格组件无法直接自定义行边框样式，需通过自定义HTML表格+注入CSS的方式实现，具体步骤如下：

1. 给不同状态的用户行添加类标识（active/inactive）
2. 编写自定义CSS，针对类设置对应颜色的边框和圆角
3. 通过Streamlit的st.markdown注入CSS并渲染HTML表格

完整Streamlit代码

import streamlit as st

# 注入自定义CSS
st.markdown("""
<style>
/* 包裹表格的容器，避免影响全局样式 */
.user-table-container td {
  padding: 8px 12px;
  text-align: center;
  border: none;
}

/* 活跃用户行 - 绿色边框+圆角 */
.user-table-container tr.active td {
  border: 1px solid #2ecc71;
}
.user-table-container tr.active td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.user-table-container tr.active td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* 非活跃用户行 - 红色边框+圆角 */
.user-table-container tr.inactive td {
  border: 1px solid #e74c3c;
}
.user-table-container tr.inactive td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.user-table-container tr.inactive td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* 消除单元格间隙，确保边框连续 */
.user-table-container table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
</style>
""", unsafe_allow_html=True)

# 模拟用户数据（包含活跃状态标记）
user_data = [
    {"name": "Pellentesque", "amount": "$120,146", "rate": "0.007", "value": "5.24", "total": "$99,225", "growth": "24.59%", "is_active": True},
    {"name": "Nunc vestibulum", "amount": "$85,493", "rate": "0.006", "value": "3.57", "total": "$120,146", "growth": "35.07%", "is_active": False},
    {"name": "Mauris risus", "amount": "$99,225", "rate": "0.009", "value": "5.31", "total": "$85,493", "growth": "40.34%", "is_active": True},
]

# 生成HTML表格
html_content = '<div class="user-table-container"><table>'
for user in user_data:
    row_class = "active" if user["is_active"] else "inactive"
    html_content += f'<tr class="{row_class}">'
    html_content += f'<td>{user["name"]}</td>'
    html_content += f'<td>{user["amount"]}</td>'
    html_content += f'<td>{user["rate"]}</td>'
    html_content += f'<td>{user["value"]}</td>'
    html_content += f'<td>{user["total"]}</td>'
    html_content += f'<td>{user["growth"]}</td>'
    html_content += '</tr>'
html_content += '</table></div>'

# 渲染表格
st.markdown(html_content, unsafe_allow_html=True)

关键说明

• 使用border-collapse: separate和border-spacing: 0确保单元格边框无缝衔接，同时让圆角样式生效
• 给表格添加容器类user-table-container，避免自定义CSS影响Streamlit的其他组件
• 通过:first-child和:last-child选择器，为每行的首尾单元格设置圆角，实现整行的圆角边框效果
• 根据用户的活跃状态动态添加active或inactive类，对应不同颜色的边框

内容的提问来源于stack exchange，提问作者ankit maltare