如何实现Bootstrap 5表格中单元格内大PRE块的滚动格式化

要解决colspan=4的单元格内大段JSON内容撑爆表格的问题，直接给目标单元格加定制样式即可，具体步骤：

• 新增自定义CSS样式
  这个样式既保证JSON内容自动换行适配单元格宽度，又在内容过长时提供垂直滚动：

  .json-cell {
    max-height: 200px; /* 可根据需求调整滚动区域高度 */
    overflow-y: auto;
    white-space: pre-wrap; /* 保留JSON换行格式同时自动换行 */
    word-break: break-all; /* 处理超长键值对的换行 */
    max-width: 100%;
  }
  

  如果希望保留JSON的紧凑格式（不自动换行，仅垂直滚动），可以把white-space: pre-wrap改成white-space: pre，同时添加overflow-x: auto，但这样可能出现横向滚动条，建议优先用pre-wrap避免表格宽出屏幕。

• 给目标单元格添加类
  在你那行colspan=4的<td>标签上加上json-cell类：

  <td colspan="4" class="json-cell">
    <!-- 你的大段JSON内容 -->
  </td>
  

• 可选优化：锁定表格宽度
  如果表格还是被内容撑宽，给<table>标签加个自定义类，强制表格按容器宽度分配列宽：

  .table-fixed {
    table-layout: fixed;
    width: 100%;
  }
  

  然后表格标签改成：

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

这样设置后，JSON内容会适配单元格宽度自动换行，高度超出设定值时出现垂直滚动条，整个表格不会超出屏幕宽度。

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