css表格首行加粗如何实现_使用::first-row和font-weight控制

新闻中心 NEWS CENTER

2025-12-03

浏览次数：次

使用 tr:first-child 或 thead 配合 font-weight 是实现表格首行加粗的推荐方式，兼容性更好且无需修改HTML结构。

要让CSS表格的首行文字加粗，可以使用伪类 ::first-row 配合 font-weight 属性来实现。这种方法简洁高效，适用于HTML中的 table 元素。

在CSS中，::first-row 可以选中表格第一行的所有单元格（无论是表头 th 还是数据单元格 td）。通过为这些单元格设置 font-weight，即可实现加粗效果。

示例代码：

table::first-row {
  font-weight: bold;
}

这样，表格的第一行所有内容都会显示为粗体，无需额外添加类名或修改HTML结构。

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

虽然 ::first-row 在规范中有定义，但目前主流浏览器对它的支持有限。更稳定的方式是使用 tr:first-child 或 tr:first-of-type 来选择第一行。

推荐写法（兼容性更好）：

table tr:first-child {
  font-weight: bold;
}

如果表格中使用了 thead，也可以更明确地针对表头：

thead tr {
  font-weight: bold;
}

尽管 ::first-row 看似直观，但在实际项目中建议使用 tr:first-child 或语义化的 thead 配合CSS控制样式，确保跨浏览器一致性。基本上就这些，不复杂但容易忽略细节。

以上就是css表格首行加粗如何实现_使用::first-row和font-weight控制的详细内容，更多请关注其它相关文章！