Html 制造<；部门>；标记填充父项<；td>；

我有一个动态填充的表。每个

内部可以有一个或多个

。根据成功或失败，这些状态div被涂成绿色或红色

我希望这些div完全填充父级

。最初，我使用的是

height:100%，但如果有多个div，则这不好。但是，如果我删除高度选择器，则只有一个
的条目很小。如下图所示

如何确保这些只有一个
的单个
条目被完全填充

下面是一段代码片段，演示了我的观点：


表，th，td{
边框：1px纯黑；
}
.成功{
背景颜色：绿色；
}
.failureDiv{
背景色：红色；
}

组件
第一步
步骤2
步骤3
名称
成功
成功
失败
成功
失败
失败
您可以像这样使用
：独生子女


表，th，td{
边框：1px纯黑；
}
.成功{
背景颜色：绿色；
}
.failureDiv{
背景色：红色；
}
.successDiv、.failureDiv{
高度：30px；
}
.successDiv:独生子女，.failureDiv:独生子女{
高度：60px；
}

组件
第一步
步骤2
名称
成功
成功
失败

表，th，td{
边框：1px纯黑；
位置：相对位置；
身高：100%；
}
.成功{
背景颜色：绿色；
}
.failureDiv{
背景色：红色；
}
.successDiv:独生子女，
.failureDiv:独生子女{
位置：相对位置；
身高：100%；
}

组件
第一步
步骤2
名称
成功
成功
失败
看起来不错，但如果td有两个div，另一个有三个div呢？如果有一个问题，这可以解决问题，但如果有两个问题，则无法解决。我编辑了我的代码片段来包含这个案例。仔细想想，这可能相当复杂。会有不同的比例等等。这应该足够了。非常感谢你的想法！