How to apply css overflow property on specific content

Question

I am applying overflow property for <form> , in form i used <legend> . Here the overflow is applying to whole form so if overflow needed scroll bar includes legend also. but I want the overflow has to be applying except legend tag. I mean in form along with legend i used table . I want overflow has to be apply only for table.

here is my fiddle,

http://jsfiddle.net/raghavendram040/z6jRX/1/

my html is,

<form>
<fieldset>
<legend>&nbsp;&nbsp;&nbsp;Menu</legend>
<table id="tab">
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    </table>
</fieldset>

my css is,

form{
  border: 1px #6A6A45 solid;
  border-radius:6px;
  height: 200px;
  overflow: auto;
  background-color:#efefef ;
  margin-bottom: 17px;

}

to apply overflow I tried like this but it didnt worked

#tab{ overlow: auto }

How can I solve this can anyone help me in this.

Answer 1

Wrap your table in a div and apply overflow to that.

Have a fiddle!

HTML

<form>
<fieldset>
    <legend>&nbsp;&nbsp;&nbsp;Menu</legend>
    <div id="scroll">
        <table id="tab">
            <tr>
                <td>abc</td>
            </tr>
          ...
        </table>
    </div>
</fieldset>
</form>

CSS

#scroll {
    overflow: scroll;
    height: 140px;
}

Answer 2

You can wrap your table with a div element:

Working Demo

<div id="tab">
    <table>
    </table>
</div>