How to create HTML `legend` element as table cell in Mozilla Firefox?
How to create HTML style legend
as table cell in Mozilla Firefox? (I can't figure out how to do this in any browser, but I only want the functionality for Firefox.)
I need this function to align multiple elements legend
in multiple elements fieldset
as if they were th
and tr
elements respectively.
The following code is an example where items 2 through 6 div
show the desired layout, which I cannot achieve with legend
and fieldset
.
There's an unwanted line break after an element legend
that I can't get rid of and that shouldn't be specified in the styles 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>
source to share
Add float: left;
to HTML tag 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>
source to share