HTML表格样式问题：粗体文本整行下划线及尺寸调整

我来帮你搞定这两个表格样式的问题，这俩都是做表格时常见的小困扰，咱们一步步来解决：

1. 实现整行下划线效果 #

看起来你之前应该是只给粗体文本标签（比如<b>/<strong>）加了text-decoration: underline，所以只有粗体部分有下划线。要让整行所有单元格都带上下划线，更靠谱的方式是给目标行的单元格设置底部边框——这种方式不会因为单元格内容换行或者排版问题出现断连，样式也更可控。

实现代码： #

首先给需要下划线的行加一个自定义类，比如underline-row：

<table>
  <tr class="underline-row">
    <td><b>粗体标题1</b></td>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>普通行标题</td>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

然后在CSS里给这个类的单元格设置底部边框：

.underline-row td {
  border-bottom: 1px solid #000; /* 可以调整粗细、颜色，比如改成2px或者灰色 */
  /* 如果想要的是文字下划线而非边框，也可以用：text-decoration: underline; */
}

2. 固定表格尺寸与参考图一致 #

要让表格保持固定大小不随内容拉伸，核心是用table-layout: fixed属性——这个属性会强制表格优先使用你设定的宽度，而不是自适应内容。配合固定的表格宽度和列宽，就能精准匹配参考图的尺寸。

实现代码： #

给表格加一个固定尺寸的类，比如fixed-size-table：

<table class="fixed-size-table">
  <!-- 表格内容 -->
</table>

然后在CSS里配置：

.fixed-size-table {
  table-layout: fixed;
  width: 700px; /* 这里填参考图里的表格总宽度 */
  border-collapse: collapse; /* 合并边框，避免多余的空隙 */
}
/* 如果需要给每列设置固定宽度，就给td指定宽度 */
.fixed-size-table td {
  width: 233px; /* 按列数均分总宽度，比如3列就700/3≈233px，也可以根据参考图单独设置每列宽度 */
  overflow: hidden; /* 内容过长时隐藏超出部分，可选 */
  white-space: nowrap; /* 防止内容换行撑大单元格，可选 */
}

这样设置后，不管单元格里的内容多长，表格和列的尺寸都会保持你设定的固定值，不会乱跑。

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