HTML表格Details列Description值排版问题求助

问题描述 #

HTML表格的Details列中，当Description对应的项目名称过长时，整个值会跳转到标题的下一行，期望实现标题（如Description:）与对应值始终保持在同一行，仅当内容长度超出容器宽度时进行单词换行。

解决方案 #

通过调整Details列内的布局结构和CSS样式，确保标题不单独换行，内容在标题右侧自动换行。以下是两种可行的修改方案：

方案一：使用Flex布局（推荐） #

通过Flex容器包裹每组标题和内容，实现标题与内容同行，内容过长时自动换行：

<table style="font-family:sans-serif; font-size: 14px; padding-left:10px; padding-right:10px; width: 100%;">
  <colgroup>
    <col span="1" style="width: 50%;" />
    <col span="1" style="width: 10%;" />
    <col span="1" style="width: 20%;" />
    <col span="1" style="width: 20%;" />
  </colgroup>
  <thead>
    <tr style="background-color: #f2f2f2;">
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px;">Details</th>
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">Qty</th>
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">Unit Price</th>
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">Subtotal</th>
    </tr>
  </thead>
  <tbody>
    <tr style="font-size: 14px;">
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; word-wrap: break-word;">
        <div style="display: flex; flex-wrap: wrap; align-items: flex-start;">
          <b style="white-space: nowrap; margin-right: 4px;">Code: </b>
          <span>{!item.Product_Name__r.ProductCode}</span>
        </div>
        <div style="display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 4px;">
          <b style="white-space: nowrap; margin-right: 4px;">Description: </b>
          <span>{!item.Product_Name__r.Name}</span>
        </div>
        <div style="display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 4px;">
          <b style="white-space: nowrap; margin-right: 4px;">Category: </b>
          <span>{!item.Product_Family__c}</span>
        </div>
      </td>
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">{!FLOOR(item.Quantity__c)}</td>
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">${!item.Unit_Price__c}</td>
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">${!ROUND(item.Unit_Price__c * item.Quantity__c, 2)}</td>
    </tr>
  </tbody>
</table>

修改说明：

• 用<div>包裹每组标题和内容，设置display: flex; flex-wrap: wrap;，让内容在空间不足时自动换行，标题始终与内容第一行对齐。
• 给<b>标签设置white-space: nowrap;，避免标题本身被拆分换行。
• 添加margin-right和margin-top优化元素间距，提升可读性。
• 给Details列的<td>添加word-wrap: break-word;，确保超长无空格单词也能被拆分换行。

方案二：固定标题宽度 #

给标题设置固定宽度，确保标题占据固定空间，内容在剩余区域内自动换行：

<table style="font-family:sans-serif; font-size: 14px; padding-left:10px; padding-right:10px; width: 100%;">
  <colgroup>
    <col span="1" style="width: 50%;" />
    <col span="1" style="width: 10%;" />
    <col span="1" style="width: 20%;" />
    <col span="1" style="width: 20%;" />
  </colgroup>
  <thead>
    <tr style="background-color: #f2f2f2;">
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px;">Details</th>
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">Qty</th>
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">Unit Price</th>
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">Subtotal</th>
    </tr>
  </thead>
  <tbody>
    <tr style="font-size: 14px;">
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; word-wrap: break-word;">
        <b style="display: inline-block; white-space: nowrap; width: 80px;">Code: </b>{!item.Product_Name__r.ProductCode}<br/>
        <b style="display: inline-block; white-space: nowrap; width: 80px;">Description: </b>{!item.Product_Name__r.Name}<br/>
        <b style="display: inline-block; white-space: nowrap; width: 80px;">Category: </b>{!item.Product_Family__c}
      </td>
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">{!FLOOR(item.Quantity__c)}</td>
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">${!item.Unit_Price__c}</td>
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">${!ROUND(item.Unit_Price__c * item.Quantity__c, 2)}</td>
    </tr>
  </tbody>
</table>

修改说明：

• 给<b>标签设置display: inline-block; width: 80px;，让标题占据固定宽度，内容在右侧剩余空间内自动换行。
• white-space: nowrap;确保标题不被拆分。
• 同样给<td>添加word-wrap: break-word;处理超长单词。

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