HTML表格：将多行换行到新行答案

【问题标题】：HTML table: Wrap multiple rows to new lineHTML表格：将多行换行到新行
【发布时间】：2021-09-23 02:42:18
【问题描述】：

我正在使用 HTML 和 CSS 来显示与逐字 IPA 转录对齐的句子：

<table>
  <tr class="eng">
    <td>This </td>
    <td>is</td>
    <td>an</td>
    <td>example</td>
    <td>sentence.</td>
  </tr>
  <tr class="ipa">
    <td>ðɪs</td>
    <td>ɪz</td>
    <td>ən</td>
    <td>ɪɡˈzæmpl̩</td>
    <td>ˈsɛntəns</td>
  </tr>
</table>

tr.eng {
  font-weight: bold;
}

tr.ipa {
  font-style: italic;
}

td {
  white-space: nowrap;
  text-align: center;
}

.eng td:first-child {
  text-align: left;
}

.eng td:last-child {
  text-align: right;
}

http://jsfiddle.net/2ab9pgmd/

如果一个句子对于屏幕来说太长，我希望两行都换行，以便它看起来像下面的硬编码示例：

<table>
  <tr class="eng">
    <td>This </td>
    <td>is</td>
    <td>an</td>
    <td>example</td>
  </tr>
  <tr class="ipa">
    <td>ðɪs</td>
    <td>ɪz</td>
    <td>ən</td>
    <td>ɪɡˈzæmpl̩</td>
  </tr>
</table>

<table>
  <tr class="eng">
    <td>sentence.</td>
  </tr>
  <tr class="ipa">
    <td>ˈsɛntəns</td>
  </tr>
</table>

是否可以设置一个 HTML 表格，根据屏幕大小动态地将多行换行为新行，而不是提前手动定义行长？

我找到了一个类似的示例，说明我想做的事情here，但这个解决方案不会让多行表的列对齐。

如果可能，我宁愿不使用 JavaScript，以便将文本视为电子书。

【问题讨论】：

尝试使用 CSS 网格而不是表格。表格行并非设计为换行

标签： html css epub

【解决方案1】：

我更喜欢你使用 CSS Grid，因为当你使用表格行进行包装时，它不会被包装起来，也不会为你提供所需的输出。您可以添加包装规则，但我认为它不会起作用。

【讨论】：