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

Posted 2023-05-06

【中文标题】HTML表格：将多行换行到新行

【英文标题】：HTML table: Wrap multiple rows to new line

【发布时间】：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 网格而不是表格。表格行并非设计为换行

【参考方案1】：

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