表格css :nth-child() 伪类的示例

当我们需要对表格中的某一列或某一行进行样式设置时，可以使用表格CSS中的:nth-child()伪类。这里提供一些示例：

对表格中的奇数行进行背景色设置：

tr:nth-child(odd) {
background-color: #f2f2f2;
}
登录后复制

对表格中的第一列进行文字居中设置：

td:nth-child(1) {
text-align: center;
}
登录后复制

对表格中的最后一列设置宽度：

td:last-child {
width: 100px;
}
登录后复制

对表格中的第三列设置字体颜色：

td:nth-child(3) {
color: #ff0000;
}
登录后复制

对表格中的第四行设置背景色和字体颜色：

tr:nth-child(4) {
background-color: #ffff00;
color: #0000ff;
}
登录后复制

相关问题

# 创建示例 DataFrame data = { 'Name': ['Bulbasaur', 'Charmander', 'Squirtle'], 'Type': ['Grass', 'Fire', 'Water'], 'HP': [45, 39, 44], 'Attack': [49, 52, 48] } df = pd.DataFrame(data) # 将 DataFrame 转换为 HTML，并添加自定义 CSS 类名 html_table = df.to_html(escape=False, index=False) # 定义用于隐藏特定列边框的 CSS 样式 custom_css = """ <style> table th:nth-child(1), table td:nth-child(1), table th:nth-child(2), table td:nth-child(2), table th:nth-child(3), table td:nth-child(3) { /* 对应 Name、Type 和 HP */ border: none !important; } </style> """ # 合并 HTML 和 CSS 并显示到 Streamlit 应用程序中 final_html = custom_css + html_table st.markdown(final_html, unsafe_allow_html=True) 这个表格行数为9？

如何确定通过 pandas 的 to_html 方法创建并在 Streamlit 中渲染的 HTML 表格的实际行数
要确认生成的 HTML 表格是否包含指定数量的行（例如 9 行），可以通过以下方式实现：
数据准备与转换
在 Pandas 中，可以利用 DataFrame 的 .shape 属性获取数据框中的行数和列数。如果目标是验证最终呈现到前端的表格是否有特定行数，则可以在 Python 脚本中先检查原始数据帧的形状。
import pandas as pd
import streamlit as st

# 创建示例数据
data = {'Column1': range(1, 10), 'Column2': range(10, 19)}
df = pd.DataFrame(data)

# 验证DataFrame的行数
row_count = df.shape[0] # 获取行数
if row_count == 9:
st.write(f"表格有 {row_count} 行") # 输出至Streamlit界面
else:
st.error(f"错误：表格应有9行，但实际只有{row_count}行")
登录后复制
上述代码片段展示了如何计算并校验数据表的行数[^2]。
使用正则表达式解析HTML字符串
当调用 to_html() 后得到的是一个完整的 HTML 字符串表示形式时，也可以借助正则表达式统计 <tr> 标签的数量来间接判断有多少行被渲染出来。
html_content = df.to_html(index=False) # 将Pandas DataFrame转成HTML格式
rows_in_html = html_content.count('<tr>') - 1 # 减去thead部分的一行
st.write(f'HTML中有 {rows_in_html} 行') # 显示结果给用户查看
登录后复制
这里减去了额外的一个头部标签 <th> 所对应的单次计数[^3]。
结合Streamlit展示效果
最后，在 Streamlit 应用程序里可以直接嵌入此逻辑以便实时反馈给开发者或者使用者关于当前显示内容的具体信息。

使用:nth-child(n)和:nth-last-child(n)选择器

:nth-child(n)和:nth-last-child(n)选择器都是CSS3中的伪类选择器，用于选择元素中的特定位置。
:nth-child(n)选择器选取父元素中第n个子元素。例如，:nth-child(2)会选取父元素中的第二个子元素。
:nth-last-child(n)选择器也是选取父元素中的第n个子元素，但是是从最后一个子元素开始计算的。例如，:nth-last-child(2)会选取父元素中的倒数第二个子元素。
这两个选择器也支持一些关键词：

even：选取偶数位置的子元素
odd：选取奇数位置的子元素
n：选取任意位置的子元素

示例：
以下是一个HTML列表：

第一项
第二项
第三项
第四项
第五项

使用:nth-child(n)选择器可以选取特定位置的项：
ul li:nth-child(2) {
color: red;
}
这个样式规则将把第二项的文本颜色设为红色。
使用:nth-last-child(n)选择器同样可以选取特定位置的项：
ul li:nth-last-child(2) {
background-color: yellow;
}
这个样式规则将把倒数第二项的背景颜色设为黄色。
使用关键词even和odd可以选取偶数或奇数位置的项：
ul li:nth-child(even) {
background-color: lightgray;
}
这个样式规则将把列表中偶数项的背景颜色设为浅灰色。
ul li:nth-child(odd) {
background-color: lightblue;
}
这个样式规则将把列表中奇数项的背景颜色设为浅蓝色。