如何在Mozilla Firefox中将HTML`legend`元素设置为表格单元格的样式？

如何在Mozilla Firefox中将HTML

legend

元素设置为表格单元格的样式？（我不知道如何在任何浏览器中实现这一点，但我只需要Firefox的功能。）

我需要此功能来对齐多个

fieldset

元素中的多个

legend

元素，就像它们分别是

th

和

tr

元素一样

下面的代码是一个示例，其中第二个到第六个

div

元素演示了我似乎无法通过

legend

和

fieldset

实现的所需布局

在

legend

元素之后有一个不希望出现的换行符，我似乎无法摆脱它，并且在给定

display:table cell

样式的情况下，它不应该出现

*{
全部：未设置；
}
：：之前，
：：之后{
全部：未设置；
}
html{
保证金：3rem；
}
风格{
显示：无；
}
h1{
显示：块；
字体大小：粗体；
边缘底部：0.25雷姆；
}
正文>div{
显示：表格；
}
字段集，
正文>div>div{
显示：表格行；
边缘底部：1rem；
轮廓：1px纯蓝色；
}
传奇
跨度
div>div>div{
显示：表格单元格；
轮廓：1px纯红；
}
输入{
-moz外观：复选框；
-webkit外观：复选框；
外观：复选框；
}

错误：表格
字段集
和
图例
复选框的标签
复选框标签；复选框应该对齐
好：表格
div
和
div
复选框的标签
复选框的标签；复选框应该对齐

添加

浮动：左到HTML
图例
标记


*{
全部：未设置；
}
html{
保证金：3rem；
}
风格{
显示：无；
}
h1{
显示：块；
字体大小：粗体；
边缘底部：0.25雷姆；
}
字段集，
正文>div{
显示：表格行；
边缘底部：1rem；
轮廓：1px纯蓝色；
}
传奇
跨度
div>div{
显示：表格单元格；
轮廓：1px纯红；
}
传奇{
浮动：左；
}
输入{
-moz外观：复选框；
-webkit外观：复选框；
外观：复选框；
}
错误：表格
字段集
和
图例
复选框的标签
好：表格
div
和
div
复选框的标签
很抱歉，这只是表面上将
图例
元素设置为表格单元格。为了清晰起见，我更新了代码示例。如果有多个字段集，复选框（或其他表单控件）应该对齐，这是表格单元格特有的功能。