How to apply css overflow property on specific content


Tags: javascript,html,css,twitter-bootstrap-3

Problem :

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.



Solution :

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;
}

    CSS Howto..

    How can I make a two column layout's main div auto fit to browser width?

    How to hide a div class in Wordpress? CSS

    How to display a background image with a:hover

    How to Include Multiple Javascript Files in .NET (Like they do in rails)

    How to set ribbon on image by stacking it in a div?

    How do I insert a custom font to text with CSS? [duplicate]

    How to add a line break
    in
    in HTML

    How to change CSS portrait to landscape in iphone?

    How to center align text over CSS shape?

    how to make nav brand centrally aligned

    How to read CSS Content value with jQuery?

    How to indicate there is more text to scroll?

    How to place differently sized images in 2 columns with figcaption aligned

    DOM How to add two divs (with jQuery inside them) next to each other?

    How to optimize CSS file for speed

    How do I center a table?

    How to make mouse hover not shift background downward? (Beginner CSS)

    Ask Toolbar preventing Bootstrap Modal to show

    How to increase the font size of one word only in the line?

    How to make input placeholder text not opaque when the text field background is opaque

    How can I center div in div in IE7

    How do I remove all of the borders from an HTML ? [closed]
    Bootstrap is adding a top border to all td elements in .table containers. Adding ! important to your no-borders rule will override that: td { border: none !important; } ...
    Read more

    How to make CSS Animation reverse on hover-out?

    How to position 3 images on top of one another and retain responsiveness using just CSS?

    How can I change the shape of a gridview to circular?

    how to make asp.net text box and dropdown flat style in css?

    How to reject specify HTML tags by using css or xpath selector

    How to make the underlines the same size in all browsers with css?

    How can I make images stack on top of each other as web page scales down?

    PrimeFaces: how can I make use of customized icons?