HTML 表：將多行換行到新行

Question

我正在使用 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 表格，根據屏幕大小動態地將多行換行到新行，而不是提前手動定義行長？

我在這里找到了一個類似的示例，說明我想在這里做什么，但是此解決方案不會使具有多於一行的表的列保持對齊。

如果可能，我寧願不使用 JavaScript，這樣可以將文本視為電子書。

Answer 1

我更喜歡您使用 CSS Grid 原因，當您使用表格行進行包裝時，它不會被包裝起來，也不會為您提供所需的輸出。 您可以添加包裝規則，但我認為它不會起作用。