One issue I encountered in my application was dealing with a fieldset that contained table data with potentially many columns.
To prevent the browser window from acquiring a horizontal scroll bar due to the wide table, I attempted to wrap the table in a container with properties like width: 100% and overflow: auto.
Unfortunately, this method failed as the fieldset still extended beyond the inner width of the browser, resulting in a scroll bar. I tried applying different styles like width: 100% directly to the fieldset, and even experimented with position: absolute using left:0;right:0; without success.
After numerous attempts, I eventually added min-width and max-width properties, which seemed to work well in Chrome, Internet Explorer, and Opera, but not in Firefox.
It appears that in Firefox, it's challenging to restrict the fieldset's width to the body width. Are there any workarounds for this issue?
Below, you can find a snippet of the CSS code that was used:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 1em;
}
fieldset {
width: 100%;
max-width: 100%;
min-width: 100%;
overflow: auto;
}
table {
display: block;
width: 290em;
table-layout: fixed;
border-collapse: collapse;
}
table input {
border: 1px solid transparent;
width: 100%;
}
td,
th {
border: 1px solid black;
width: 10em;
}
.container {
width: 100%;
overflow: auto;
}And here is the corresponding HTML code:
<fieldset>
<legend>
Table Data
</legend>
<div class="container">
<table>
<!-- table content goes here -->
</table>
</div>
</fieldset>