是否有一种方法可以将HTML表中的每一行分开包装而不共享分隔符行

Question

我在我正在构建的网页中有一个表格，其中左列或右列(但不是两者)都有一些相当长的文本(少量单词)。表有两列--第一列左对齐，第二列右对齐.下面是我的表的简化版本：

<table>
  <tr>
    <td>Some rather long text</td>
    <td class=right-align>Short text</td>
  </tr>
  <tr>
    <td>Text</td>
    <td class=right-align>Some very long piece of text</td>
  </tr>
</table>

它还附带了少量CSS：

.right-align {
  text-align: right;
}

table {
  width: 100%;
}

在一个合理的宽度，它看起来很好：

​

​

不幸的是，如果我缩小窗口，文本将被包装：

​

​

是否有一种方法可以让文本通过“列分隔符”，并允许该边框位于每个行的不同位置？如果每一行的“列分隔符”可能不同，则每一行只占一行的空间。我不使用任何库，只是CSS + HTML。

我在找它来做这样的事情(用MS颜料作图)

​

​

Answer 1

不，不是用经典的html表。你将不得不使用网格或柔性盒来达到你想要的效果。