本文介绍通过 CSS 的 white-space: nowrap 属性控制表格单元格（）文本不换行，结合响应式布局与合理样式设置，使表头与数据列根据长文本内容自然扩展宽度，避免截断或强制折行。

本文介绍通过 css 的 `white-space: nowrap` 属性控制表格单元格（`

`）文本不换行，结合响应式布局与合理样式设置，使表头与数据列根据长文本内容自然扩展宽度，避免截断或强制折行。

在构建响应式表格时，一个常见痛点是：当单元格内出现较长的姓名、奖项名称或复合文本（如“James Smith and Isaac Smith”）时，浏览器默认会将文本自动折行以适应固定列宽，导致行高异常增加、视觉错乱，甚至破坏表格整体对齐结构。

解决这一问题的核心思路不是强行限制宽度，而是允许列宽弹性伸展，并阻止内部文本换行。最直接有效的方式是为

元素应用 white-space: nowrap：

td {
  white-space: nowrap;
  padding: 0.25em;
  border: 1px solid #ccc;
}

th {
  white-space: nowrap; /* 同样建议应用于表头，保持一致性 */
  padding: 0.5em 0.75em;
}

/* 可选：增强可读性 */
tr {
  text-align: center;
}

⚠️ 注意事项：

• white-space: nowrap 仅阻止换行，不改变表格的自动宽度计算逻辑。配合父容器 .table-responsive（Bootstrap 中的溢出包装类），当总宽度超出视口时，仍可通过水平滚动查看完整内容；
• 若需在小屏设备上兼顾可读性与空间效率，可结合媒体查询做渐进增强：

  @media (max-width: 768px) {
    td, th {
      font-size: 0.85rem;
      padding: 0.2em 0.4em;
    }
  }

• 避免对整个 设置 table-layout: fixed，否则会禁用基于内容的自动列宽分配，导致 nowrap 失效或列宽被强制压缩；
  对于极长且不可缩写的文本（如证书编号），可考虑添加 text-overflow: ellipsis + overflow: hidden + min-width 组合方案，但本例中以“保持完整显示”为优先目标，故不启用截断。

  最终效果是：表格列宽由最长单元格内容（包括表头）动态决定，所有行保持单行显示、高度一致，同时保留 .table-responsive 提供的横向滚动能力——既保障信息完整性，又不失响应式友好性。