I am setting the overflow property for the <form> element, which contains a <legend>. The issue is that the overflow affects the entire form, including the legend, when I actually want it to apply only to the table within the form. Essentially, I have a form with a legend and a table, and I only want the overflow to be applied to the table.
Here is the link to my fiddle:
http://jsfiddle.net/raghavendram040/z6jRX/1/
This is my HTML code:
<form>
<fieldset>
<legend> Menu</legend>
<table id="tab">
<tr>
<td>abc</td>
</tr>
...
</table>
</fieldset>
And here is my CSS code:
form{
border: 1px #6A6A45 solid;
border-radius:6px;
height: 200px;
overflow: auto;
background-color:#efefef ;
margin-bottom: 17px;
}
I tried applying overflow specifically to the table like this, but it did not work:
#tab{ overlow: auto }
Can anyone help me figure out how to correctly apply the overflow property only to the table in this case?