固定宽度表格因单元格换行导致布局异常的问题求助

核心问题在于表格默认的table-layout: auto会根据内容自动调整列宽，导致上方单元格内容换行时，最后两行的列布局被打乱。以下是具体解决步骤：

1. 开启固定表格布局模式 #

给表格添加table-layout: fixed，让表格严格按照预设的列宽渲染，不再随内容自动调整：

table {
  width: 702px;
  border-collapse: collapse;
  table-layout: fixed; /* 新增：固定表格布局 */
}

2. 明确定义每一列的宽度 #

因为最后两行是5列结构，需要给每一列设置固定宽度，确保布局稳定。可以通过<colgroup>标签添加<col>来定义列宽：
在每个表格的<tbody>前添加：

<colgroup>
  <col style="width: 25%;"> <!-- 对应第一列 -->
  <col style="width: 18.75%;"> <!-- 第二列 -->
  <col style="width: 18.75%;"> <!-- 第三列 -->
  <col style="width: 18.75%;"> <!-- 第四列 -->
  <col style="width: 18.75%;"> <!-- 第五列 -->
</colgroup>

注：25% + 18.75%×4 = 100%，刚好填满702px的表格宽度

3. 强制最后两行单元格不换行 #

给最后两行的单元格添加white-space: nowrap，确保内容始终在一行显示：

/* 针对最后两行的单元格强制不换行 */
table.table-params tr.oftp-feature td,
table.table-params tr:last-child td {
  white-space: nowrap;
}

修改后的完整代码 #

CSS部分 #

:root {
  --color-background: whitesmoke;
  --color-pageBox: #666;
  --color-paper: white;
  --color-marginBox: transparent;
  --main-bg-color: #943126;
  --main-accent-color: #1C2833;
  --line-height: 1.28rem;
}

body {
  font-family: sans-serif;
  font-size: 0.9rem;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  line-height: var(--line-height);
}

table {
  width: 702px;
  border-collapse: collapse;
  table-layout: fixed; /* 固定表格布局 */
}

table:not(:last-child) {
  margin-bottom: calc(var(--line-height) * 1.2);
}

table th {
  background-color: var(--main-accent-color);
  text-transform: uppercase;
  font-weight: 300;
  color: var(--color-paper);
  text-align: left;
  padding-left: 1rem;
}

table td {
  padding-left: 1rem;
}

table td.bold {
  font-weight: 600;
}

table td.code {
  font-family: 'Courier New', Courier, monospace;
}

table td.small {
  font-size: .8rem;
  line-height: .8rem;
}

table.table-params th:first-child {
  width: 25%;
}

table th:last-child:not(:only-of-type) {
  background-color: var(--main-bg-color);
  border-left: 1mm solid var(--color-paper);
}

table th:last-child {
  padding-right: 1rem;
}

table th:last-child span {
  float: right;
  font-weight: 600;
}

table tr:nth-child(odd) {
  background-color: #ececec;
}

table tr {
  border-left: 0;
}

table a {
  color: #000;
}

/* 新增：强制最后两行单元格不换行 */
table.table-params tr.oftp-feature td,
table.table-params tr:last-child td {
  white-space: nowrap;
}

HTML部分 #

<table class="table-params">
  <colgroup>
    <col style="width: 25%;">
    <col style="width: 18.75%;">
    <col style="width: 18.75%;">
    <col style="width: 18.75%;">
    <col style="width: 18.75%;">
  </colgroup>
  <tbody>
    <tr>
      <th>Description</th>
      <th colspan="4">Value<span>AS2</span></th>
    </tr>
    <tr>
      <td class="bold">URL</td>
      <td colspan="4" style="user-select: all">https://example.com:8443</td>
    </tr>
    <tr>
      <td class="bold">Certificate subject</td>
      <td class="code small" colspan="4"><span>This is a short subject which fits in one line </span></td>
    </tr>
    <tr>
      <td class="bold">Certificate serial</td>
      <td class="code" colspan="4">11:22:33:44:55:AA:BB:CC:DD:EE</td>
    </tr>
    <tr class="oftp-feature" style="border-bottom: 0.5mm solid var(--main-accent-color);">
      <td width="25%" class="bold">Delivery Notification</td>
      <td class="bold">File&nbsp;encryption</td>
      <td class="bold">File&nbsp;signing</td>
      <td class="bold">MDN&nbsp;signing</td>
      <td class="bold">Content-Type&nbsp;(preferred)</td>
    </tr>
    <tr>
      <td>Sync or async</td>
      <td>Yes (any)</td>
      <td>Yes (any)</td>
      <td>Yes (any)</td>
      <td>application/octet-stream</td>
    </tr>
  </tbody>
</table>
<table class="table-params">
  <colgroup>
    <col style="width: 25%;">
    <col style="width: 18.75%;">
    <col style="width: 18.75%;">
    <col style="width: 18.75%;">
    <col style="width: 18.75%;">
  </colgroup>
  <tbody>
    <tr>
      <th>Description</th>
      <th colspan="4">Value<span>AS2</span></th>
    </tr>
    <tr>
      <td class="bold">URL</td>
      <td colspan="4" style="user-select: all">https://example.com:8443</td>
    </tr>
    <tr>
      <td class="bold">Certificate subject</td>
      <td class="code small" colspan="4"><span>This is the exact same table but with a long subject which does not fit in one line </span></td>
    </tr>
    <tr>
      <td class="bold">Certificate serial</td>
      <td class="code" colspan="4">11:22:33:44:55:AA:BB:CC:DD:EE</td>
    </tr>
    <tr class="oftp-feature" style="border-bottom: 0.5mm solid var(--main-accent-color);">
      <td width="25%" class="bold">Delivery Notification</td>
      <td class="bold">File&nbsp;encryption</td>
      <td class="bold">File&nbsp;signing</td>
      <td class="bold">MDN&nbsp;signing</td>
      <td class="bold">Content-Type&nbsp;(preferred)</td>
    </tr>
    <tr>
      <td>Sync or async</td>
      <td>Yes (any)</td>
      <td>Yes (any)</td>
      <td>Yes (any)</td>
      <td>application/octet-stream</td>
    </tr>
  </tbody>
</table>

原理说明 #

• table-layout: fixed让表格优先使用预设的列宽，不再根据内容动态调整，确保布局稳定。
• <colgroup>定义每一列的固定宽度，保证最后两行的5列布局不会被上方跨列的单元格打乱。
• white-space: nowrap强制最后两行的单元格内容不换行，满足需求。

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