单元格换行改变表格布局

Question

我有一张固定宽度的桌子。这里最后两行应该始终没有中断。但是，如果另一个单元格包含更多内容，则表格布局会发生变化，因此必须换行。

我已经玩过断字和嵌套跨度，但没有成功。这很奇怪，但我希望以下代码有助于澄清情况：

: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

您可以通过 css 添加 table-layout 属性，以便它始终呈现相同的宽度等。之后，第一个表格也包含最后一个“Content-Type ...”列。我还通过虚拟

white-space: nowrap

类添加了

ff

。你的桌子对于那个内容来说太小了，因为现在它溢出到右边了。

: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 ff">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 ff">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>