英文:
Cell line break changes table layout
问题
I have translated the provided content. Here is the translated text:
我有一个具有固定宽度的表格。这里的最后两行应始终保持不间断。但是，如果另一个单元格内容较多，因此需要换行，表格布局会发生更改。
我已经尝试过使用word-break和嵌套的span，但没有成功。这很奇怪，但我希望以下代码可以帮助澄清情况：
<!-- 开始片段: js 隐藏: false 控制台: true babel: false -->
<!-- 语言：lang-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: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;
}
<!-- 语言：lang-html -->
<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>这是适合一行的短主题 </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">文件加密</td>
<td class="bold">文件签名</td>
<td class="bold">MDN签名</td>
<td class="bold">Content-Type（首选）</td>
</tr>
<tr>
<td>同步或异步</td>
<td>是（任何）</td>
<td>是（任何）</td>
<td>是（任何）</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>这是相同的表，但主题较长，不适合一行 </span></td>
</tr>
<tr>
<td class="bold">Certificate serial</td>
<td class="code" colspan="
<details>
<summary>英文:</summary>
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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: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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
</details>
# 答案1
**得分**: 2
你可以通过CSS添加[table-layout](https://www.w3schools.com/cssref/pr_tab_table-layout.php)属性，以使表格始终呈现相同的宽度等。此后，第一个表格也会包装最后一个"Content-Type..."列。我还添加了一个名为`ff`的类，并设置`white-space: nowrap`。你的表格对于这个内容来说太小了，因此现在内容会溢出到右侧。
<details>
<summary>英文:</summary>
You can add the [table-layout](https://www.w3schools.com/cssref/pr_tab_table-layout.php) 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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论