直接给或加.fw-bold类即可,避免用包裹整行,因其破坏表格语义、样式易被覆盖且响应式下失效;bootstrap 5.2+中.fw-bold在上完全生效,需确保无其他css覆盖。
直接给 HTML 表格中 ✅ 推荐方式(Bootstrap 5): ⚠️ 注意: 复杂点在于:加粗行为常和高亮、悬停、选中状态联动。如果某行既要加粗又要背景色变化,优先用 <tr> 或 <code><td> 加 <code>.fw-bold 类(bootstrap 5+)即可,不要用 <strong></strong> 包裹整行内容——语义错、样式可能被覆盖、响应式下易失效。
为什么不能只靠
<strong></strong> 或 <b></b> 套整行?<tr> 是块级容器,<code><strong></strong> 是行内容器,强行包裹会破坏表格结构合法性(W3C 验证不通过),且 Bootstrap 的 .table 样式默认重置了 font-weight,导致内嵌 <strong></strong> 无效。常见现象是:文字看着没加粗,或只在部分浏览器生效。
.fw-bold 在 <tr> 上是否生效?
<p>完全生效,但要注意前提:</p>
<ul><li>必须使用 Bootstrap 5.2+(<code>.fw-bold 在 5.0 就已存在,但早期版本对 <tr> 的继承支持不稳定)
<li><code><tr> 本身不设 <code>font-weight,所以依赖父级 <tbody> 或 <code><table> 的继承;确保没被其他 CSS 覆盖(比如自定义 theme 中重写了 <code>font-weight)
font-weight: bold !important 写在 <tr> 的 <code>style 属性里,或单独定义类如 .row-bold { font-weight: bold; }
实际怎么写?推荐两种可靠写法
姓名
张三
85
姓名
李四
92
.fw-bold 对 <th> 默认也生效,如果表头本来就是加粗的,再加一次不会出错,但没必要;若只想加粗数据行,就只加在 <code><tr> 上,别污染 <code><thead>。
<p>❌ 不推荐方式(语义混乱 + 兼容风险):</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS,完成 OpenClaw 完整部署,包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><tr>
<td><strong>姓名</strong></td>
<td><strong>张三</strong></td>
<td><strong>85</strong></td>
</tr></pre>
<p>这样写会导致每格都多一层标签,JS 操作 DOM 时容易误判节点层级,而且当表格开启响应式堆叠(<code>.table-responsive)后,<strong></strong> 可能被折叠逻辑忽略。.fw-bold + .bg-primary 组合,别试图用 !important 强行覆盖字体粗细——那说明你该检查 CSS 优先级链了。










