Cell line break changes table layout

Question

I have a table with a fixed width. Here the last two rows should always be without breaks. However, the table layout is changed if another cell has more content and therefore has to wrap.

I've already played with word-break and nested spans, but without success. It's quite strange, but I hope the following code helps to clarify the situation:

: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: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 class="table-params">
  <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">
  <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>

Answer 1

You can add the table-layout property via css so that it always renders the same widths etc. After that the first table also wraps the last "Content-Type..." column. I also added a white-space: nowrap via a dummy ff class. Your table is simply to small for that content, cause now it overflows to the right.

: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;
}

.ff {
  white-space: nowrap;
}

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 class="table-params">
  <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">
  <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>