Css 如何打破a<；tr>；在不更改HTML布局的情况下在几行上？

我已经看过了所有与这个问题相关的问题，但是没有一个问题得到了我想要的答案。我有一个表格，最后一列包含很多细节。我希望最后一列在自己的行中：

|姓|名|电子邮件|
===========================================
|多伊|约翰|john@doe.com   |
-------------------------------------------
|关于约翰的长消息|
===========================================
|史密斯|简|jane@smith.com |
-------------------------------------------
|一些关于简的详细信息|
===========================================

我尝试了各种

显示设置，但总是有问题。当布局正确时（例如，
tr
为
flex
），标题和内容不对齐

我也不想要基于magic
px
值的解决方案。我所有的CSS都使用
[r]em
，我想保留这个


tr，tr-td，tr-th{
边框：1px纯黑；
}
桌子{
边界塌陷：塌陷；
}
运输署{
显示：内联；
}
td：最后一个孩子{
显示：块；
}

姓
名字
电子邮件
细节
雌鹿
约翰
john@doe.com
关于约翰的长消息
史密斯
简
jane@smith.com
一些关于简的详细信息
好吧，你想要的是一种有点奇怪的东西，因为你想改变一个表的工作方式，因为一个单元格（
td
）应该像其他单元格一样列在列中，而不是只为自己填充整行，这就是为什么很难做到这一点

但是在包含“大信息”的列中添加一个类，然后您可以添加一些CSS，通过使用一些
flex
属性，强制此单元格分解并变成一行

看看下面的代码是否对您有用，并注意我在CSS中所做的一些更改：


表格{
表布局：固定；
宽度：100%；
}
运输署，
th{
边框：实心1px；
弹性：1；
}
th{
背景：rgba（0,0,0,0.1）
}
tr{
显示器：flex；
柔性包装：包装；
边框：实心1px；
}
tr>.cellAsRow{
宽度：100%；
flex：自动；
}

姓
名字
电子邮件
细节
雌鹿
约翰
john@doe.com
关于约翰的长消息
史密斯
简
jane@smith.com
一些关于简的详细信息
好吧，你想要的是一种有点奇怪的东西，因为你想改变一个表的工作方式，因为一个单元格（
td
）应该像其他单元格一样列在列中，而不是只为自己填充整行，这就是为什么很难做到这一点

但是在包含“大信息”的列中添加一个类，然后您可以添加一些CSS，通过使用一些
flex
属性，强制此单元格分解并变成一行

看看下面的代码是否对您有用，并注意我在CSS中所做的一些更改：


表格{
表布局：固定；
宽度：100%；
}
运输署，
th{
边框：实心1px；
弹性：1；
}
th{
背景：rgba（0,0,0,0.1）
}
tr{
显示器：flex；
柔性包装：包装；
边框：实心1px；
}
tr>.cellAsRow{
宽度：100%；
flex：自动；
}

姓
名字
电子邮件
细节
雌鹿
约翰
john@doe.com
关于约翰的长消息
史密斯
简
jane@smith.com
一些关于简的详细信息
这是一个纯CSS解决方案，它可以自动调整列宽。但是，它仅适用于特定高度的行。包含大部分数据的行和包含“大信息”的行可以有不同的高度，但每个条目的高度必须相同


tr-td，tr-th{
边框：1px纯黑；
线高：1rem；
}
桌子{
/*在行之间添加间距，以便为额外的行腾出空间*/
/*在间距和填充中添加2px以说明边框*/
边界间距：0px计算（1rem+2px）；
垫底：2件；
}
tr{
/*变换tr允许子元素的绝对定位*/
变换：比例（1）；
}
tr td：最后一个孩子{
/*手动换行最后一列*/
位置：绝对位置；
最高：100%；
左：0；
宽度：100%；
/*绝对定位时，边界的计算方式不同，这将修复边界*/
框大小：边框框；
/*这只适用于一行文本，因此请隐藏多余的文本*/
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}

姓
名字
电子邮件
细节
雌鹿
约翰
john@doe.com
一些关于约翰的长信息和一些额外的信息来显示省略号
史密斯
简
jane@smith.com
一些关于简的详细信息
这是一个纯CSS解决方案，它可以自动调整列宽。但是，它仅适用于特定高度的行。包含大部分数据的行和包含“大信息”的行可以有不同的高度，但每个条目的高度必须相同


tr-td，tr-th{
边框：1px纯黑；
线高：1rem；
}
桌子{
/*在行之间添加间距，以便为额外的行腾出空间*/
/*在间距和填充中添加2px以说明边框*/
边界间距：0px计算（1rem+2px）；
垫底：2件；
}
tr{
/*变换tr允许子元素的绝对定位*/
变换：比例（1）；
}
tr td：最后一个孩子{
/*手动换行最后一列*/
位置：绝对位置；
最高：100%；
左：0；
宽度：100%；
/*绝对定位时，边界的计算方式不同，这将修复边界*/
框大小：边框框；
/*这只适用于一行文本，因此请隐藏多余的文本*/
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}

姓
名字
电子邮件
细节
雌鹿
约翰
约翰