0

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.

user3599482
  • 157
  • 2
  • 3
  • 15

2 Answers2

3

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;
}
misterManSam
  • 24,303
  • 11
  • 69
  • 89
  • Thank u . .it solved my pbm but I hav small problem, in another table i need to keep table header to be constant and need scroll bar to table rows. how to do that, pls help me. – user3599482 Jun 24 '14 at 07:25
  • There are many solutions :) [Here is a similar question](http://stackoverflow.com/questions/1019938/make-tbody-scrollable-in-webkit-browsers) – misterManSam Jun 24 '14 at 08:01
  • wer is the css for that table. – user3599482 Jun 24 '14 at 10:44
2

You can wrap your table with a div element:

Working Demo

<div id="tab">
    <table>
    </table>
</div>
webkit
  • 3,349
  • 1
  • 16
  • 18
  • Thank u . .it solved my pbm but I hav small problem, in another table i need to keep table header to be constant and need scroll bar to table rows. how to do that, pls help me. – user3599482 Jun 24 '14 at 07:22
  • Ok.. update the fiddle above to illustrate your problem. – webkit Jun 24 '14 at 07:33