HTML table如何实现多行同步按屏宽自动换行并保持列对齐？

可以实现，无需JavaScript，放弃原有table布局改用flex分组布局即可，核心思路是将单词和对应IPA作为不可拆分的整体单元，依靠弹性盒的自动换行能力实现同步换行。

实现代码 #

HTML 结构

<div class="ipa-sentence">
  <div class="word-unit">
    <span class="eng">This</span>
    <span class="ipa">ðɪs</span>
  </div>
  <div class="word-unit">
    <span class="eng">is</span>
    <span class="ipa">ɪz</span>
  </div>
  <div class="word-unit">
    <span class="eng">an</span>
    <span class="ipa">ən</span>
  </div>
  <div class="word-unit">
    <span class="eng">example</span>
    <span class="ipa">ɪɡˈzæmpl̩</span>
  </div>
  <div class="word-unit">
    <span class="eng">sentence.</span>
    <span class="ipa">ˈsɛntəns</span>
  </div>
</div>

CSS 样式

/* 句子外层容器，支持自动换行 */
.ipa-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  line-height: 1.6;
}

/* 单词+IPA的最小单元，换行时不可拆分 */
.word-unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

.eng {
  font-weight: bold;
}

.ipa {
  font-style: italic;
  font-size: 0.9em;
}

/* 适配首尾对齐需求 */
.word-unit:first-child .eng {
  align-self: flex-start;
}
.word-unit:last-child .eng {
  align-self: flex-end;
}

方案说明 #

原有table布局的行是完整的横向布局单元，原生不支持跨行自动折行，仅能通过手动拆分多个table实现换行，无法自适应不同屏幕宽度。
该方案将每个单词和对应IPA绑定为独立单元，页面宽度不足时整个单元同步换行，始终保持上下对齐效果，兼容绝大多数电子书阅读器的CSS支持范围，无需JavaScript即可运行。

内容的提问来源于stack exchange，提问作者Nathan