Here's a fiddle.
I need to make the <fieldset>
the width of its contents, rather than its parent. Is there a good way to do this?
fieldset width defaults to 100% width of its container, however, you can use “display: inline-block;” to adjust its width to controls inside it.
The fit-content behaves as fit-content(stretch) . In practice this means that the box will use the available space, but never more than max-content . When used as laid out box size for width , height , min-width , min-height , max-width and max-height the maximum and minimum sizes refer to the content size.
A fieldset is as large as the parent container, just like any block-level element, if you do not give it a fixed width. So you have to make it display: inline-block . Show activity on this post.
Add display:inline to the fieldset http://jsfiddle.net/XDMfN/92/
You want a shrinkwrap?
HTML
<div>
<form>
<fieldset>
<legend>Hey</legend>
<table>
<thead><tr><td>H1</td><td>H2</td></tr></thead>
<tbody><tr><td>A1</td><td>B2</td></tr>
<tr><td>A2</td><td>B9</td></tr></tbody>
</table>
</fieldset>
</form>
</div>
CSS
fieldset{
border: solid 2px blue;
float:left;
}
table{
border: solid 2px red;
}
div{
width: 80%;
overflow:hidden;
border: solid 2px purple;
padding: 1em;
}
Output
Add this to your CSS
fieldset
{
display: inline;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With