如何让HTML表格每行独立换行，不共用列分隔线？

表格布局的列宽是全局统一的，没法做到每行的分隔位置独立，改用Flex布局可以完美实现你的需求——每行文本不换行，左右元素分别对齐且分隔点随内容调整。

替换后的HTML结构 #

<div class="text-pairs">
  <div class="pair-row">
    <span class="left">Some rather long text</span>
    <span class="right">Short text</span>
  </div>
  <div class="pair-row">
    <span class="left">Text</span>
    <span class="right">Some very long piece of text</span>
  </div>
</div>

配套CSS代码 #

.text-pairs {
  width: 100%;
}

.pair-row {
  display: flex;
  justify-content: space-between; /* 让左右元素分别贴紧容器两端 */
  white-space: nowrap; /* 强制文本不换行 */
  margin: 4px 0; /* 模拟表格行之间的间距 */
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

效果说明 #

• 每个.pair-row是独立的Flex容器，左右元素的分隔位置完全由该行内容决定，不会受其他行影响
• white-space: nowrap确保长文本始终保持一行，不会因窗口缩小而换行
• justify-content: space-between自动让左元素靠左、右元素靠右，中间的空白区域会随窗口宽度自适应调整

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