HTML 表：将多行换行到新行

如何解决HTML 表：将多行换行到新行

我正在使用 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 Grid 原因，当您使用表格行进行包装时，它不会被包装起来，也不会为您提供所需的输出。您可以添加换行规则，但我认为这行不通。