Results 1 to 4 of 4

Thread: adding vertical scroll bar for the table in css

  1. #1
    Join Date
    Oct 2008
    Posts
    47

    adding vertical scroll bar for the table in css

    Hi,

    I want to have a vertical scroll to mt table which fetch values from my database.
    I want to fix the height of the table & then navigate it with the scroll.
    If you can help me with the scroll that will be very helpful.

    help me with the vertical scroll bar for the table in css.

  2. #2
    Join Date
    Apr 2008
    Posts
    242

    Re: adding vertical scroll bar for the table in css

    Try this:
    Code:
    #main
    {
    width:100%;
    height:100%;
    overflow:auto;
    }
    
    <td width="100%">
    <div id="main">
    <table width="99%" border="0">
    <tr>
    <td width="97%" valign="top">
    text
    </td>
    </tr>
    </table>
    </div>
    </td>

  3. #3
    Join Date
    Aug 2008
    Posts
    90

    Re: adding vertical scroll bar for the table in css

    I tend to go with a containing div:

    Code:
    div.scroll {
      overflow:auto;
      padding-right:6px;
    }
    You'll need to add a height attribute somewhere for this to work! I usually have a default set in the div.scroll declaration in html
    Code:
    <div class="scroll" >
      <table>
      <!-- your table stuff in here -->
      </table>
    </div>

  4. #4
    Join Date
    Oct 2008
    Posts
    93

    Re: adding vertical scroll bar for the table in css

    You can not with TABLE Element, You do can with DIV

    <div style="overflow: scroll/auto/hidden;"></div>

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    </head>
    <body bgcolor="#777770" text="#ffffff">
    
    <div style="height: 420px; overflow: scroll;">
           <table width="100%" height="420px" border="1">
               <tr>
                   <td width="70%" valign="top" height="400px" class="component"><jdoc:include type="component" />
                       
                    </td>
                    <td class="valign">
                       <table class="table1" border="0">   
                           <tr>
                             <td height="10px"> <div id="recent"> Recent Project  </div> </td>
                            </tr>
                            <tr>
                               <td> <jdoc:include type="modules" name="recentproj" /></td>
                            </tr></table>
                    </td>
                    </tr>
                   
            </table>
    </div>
    
    </body>
    </html>

Similar Threads

  1. Replies: 5
    Last Post: 21-11-2011, 09:55 PM
  2. Display vertical scroll bar in Word 2010
    By Skullnit in forum Windows Software
    Replies: 1
    Last Post: 30-08-2011, 11:28 PM
  3. Adding scroll bars to images in excel sheet
    By arungiles in forum Tips & Tweaks
    Replies: 1
    Last Post: 05-08-2011, 03:37 PM
  4. Replies: 4
    Last Post: 09-04-2010, 06:45 AM
  5. Different ways of using sql query for adding values in the table
    By REDBULL in forum Software Development
    Replies: 3
    Last Post: 13-11-2009, 07:58 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •