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

Question

如何在 Mozilla Firefox 中将 HTML legend 元素设置为表格单元格？ （我不知道如何在任何浏览器中执行此操作，但我只需要 Firefox 的功能。）

我需要这个功能来对齐多个 fieldset 元素中的多个 legend 元素，就好像它们分别是 th 和 tr 元素一样。

以下代码是一个示例，其中第二个到第六个 div 元素演示了我使用 legend 和 fieldset 似乎无法实现的所需布局。

legend 元素之后有一个我似乎无法摆脱的不想要的换行符，考虑到display: table-cell 样式，它不应该存在。

* {
  all: unset;
}

 ::before,
 ::after {
  all: unset;
}

html {
  margin: 3rem;
}

style {
  display: none;
}

h1 {
  display: block;
  font-weight: bolder;
  margin-bottom: 0.25rem;
}

body > div {
  display: table;
}

fieldset,
body > div > div {
  display: table-row;
  margin-bottom: 1rem;
  outline: 1px solid blue;
}

legend,
span,
div > div > div {
  display: table-cell;
  outline: 1px solid red;
}

input {
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

<h1>bad: tabular <code>fieldset</code> and <code>legend</code></h1>
<div>
  <fieldset>
    <legend><label for="checkbox.1">Label for Checkbox</label></legend>
    <span><input id="checkbox.1" type="checkbox"></span>
  </fieldset>
  <fieldset>
    <legend><label for="checkbox.2">Label for Checkbox; Checkboxes Should Line Up</label></legend>
    <span><input id="checkbox.2" type="checkbox"></span>
  </fieldset>
</div>
<h1>good: tabular <code>div</code> and <code>div</code></h1>
<div>
  <div>
    <div><label for="checkbox.3">Label for Checkbox</label></div>
    <span><input id="checkbox.3" type="checkbox"></span>
  </div>
  <div>
    <div><label for="checkbox.3">Label for Checkbox; Checkboxes Should Line Up</label></div>
    <span><input id="checkbox.3" type="checkbox"></span>
  </div>
</div>

Answer 1

将float: left; 添加到 HTML legend 标记中。

* {
  all: unset;
}
html {
  margin: 3rem;
}
style {
  display: none;
}
h1 {
  display: block;
  font-weight: bolder;
  margin-bottom: 0.25rem;
}
fieldset,
body > div {
  display: table-row;
  margin-bottom: 1rem;
  outline: 1px solid blue;
}
legend,
span,
div > div {
  display: table-cell;
  outline: 1px solid red;
}
legend {
  float: left;
}
input {
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

<h1>bad: tabular <code>fieldset</code> and <code>legend</code></h1>
<fieldset>
  <legend><label for="checkbox.1">Label for Checkbox</label></legend><span><input id="checkbox.1" type="checkbox"></span>
</fieldset>
<h1>good: tabular <code>div</code> and <code>div</code></h1>
<div>
  <div><label for="checkbox.2">Label for Checkbox</label></div>
  <span><input id="checkbox.2" type="checkbox"></span>
</div>