36 users online (0 members and 36 guests)  


  Results 1 to 7 of 7

Related

  1. Scrollbar in a cell in a table?    Forum: HTML Forum
    Replies: 6
  2. Replies: 4
  3. Scrollbar, in or outside table    Forum: Website Scripts Forum
    Replies: 0
  4. Replies: 9
  1. #1
    agabhil's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    3

    Scrollbar on table

    Hi friends,

    I want to know whether we can add a scrollbar for a table without using div.I want to implemement this as a css so that I had used several tables inside my site with a particular class name and i want to implement scrollbars for all of them by just modifying the classname of those tables in the css file.

    Pls help me on this

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Scrollbar on table

    Hi agabhil,

    First of all, Welcome to the forums

    Yes you can. Give the containing element of the tables an overflow property of auto and a fixed height.
    For instance, if the tables are inside a <td> element, then set the <td>:
    Code:
    <td style="height:50px;overflow:auto;">
    Hope makes sense.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    agabhil's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    3

    Re: Scrollbar on table

    I tried this..but doesn't worked....Can you give me a full example...
    Also, my requirement is to design a class so that if this class is assigned to a table, the table will get scrollbars..

    Thanks for your response

  4. #4
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Scrollbar on table

    Show us your code or better a link, so we could have something to play with.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Scrollbar on table

    Hi there agabhil,

    the table element and the td element do not implement the CSS overflow property.

  6. #6
    agabhil's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    3

    Re: Scrollbar on table

    But we can implement overflow property to tbody.This is working in Firefox, but not in IE

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Scrollbar on table

    Hi there agabhil,
    But we can implement overflow property to tbody.This is working in Firefox, but not in IE
    That is true for Firefox only and in a rather unsatisfactory manner. It produces an unwanted horizontal scrollbar also.
    Also note that Opera and Safari, like IE do not support the overflow attribute for the tbody.

    Here is how I wouild approach the problem...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>scrollable table</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    body {
        margin:10px;
     }
    #container {
        width:654px;
        margin:auto;
     }
    #table1 {
        border-top:2px solid #999;
        border-right:2px solid #999;
        border-left:2px solid #999;
        margin-bottom:-2px;
     }
    #table1 tbody {
        display:none;
     }
    #table2 {
        border-right:2px solid #999;
        border-left:2px solid #999;
     }
    #table1 th {
        background-color:#eef;
     }
    #table1 th,#table2 td {
        width:150px;
        height:30px;
        border:1px solid #000;
        padding:2px;
     }
    #scroller {
        width:654px;
        height:98px;
        overflow:auto;
        border-bottom:2px solid #999;
     }
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    #table1 th,#table2 td {
        height:26px;
     }
    #scroller {
        height:104px;
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <div id="container">
    
    <table id="table1">
    <thead><tr>
    <th>header</th><th>header</th><th>header</th><th>header</th>
    </tr></thead>
    <tbody><tr><td></td><td></td><td></td><td></td></tr></tbody>
    </table>
    
    <div id="scroller">
    
    <table  id="table2">
    <tbody><tr>
    <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
    </tr><tr>
    <td>cell 5</td><td>cell 6</td><td>cell 7</td><td>cell 8</td>
    </tr><tr>
    <td>cell 9</td><td>cell 10</td><td>cell 11</td><td>cell 12</td>
    </tr><tr>
    <td>cell 13</td><td>cell 14</td><td>cell 15</td><td>cell 16</td>
    </tr><tr>
    <td>cell 17</td><td>cell 18</td><td>cell 19</td><td>cell 20</td>
    </tr><tr>
    <td>cell 21</td><td>cell 22</td><td>cell 23</td><td>cell 24</td>
    </tr><tr>
    <td>cell 25</td><td>cell 26</td><td>cell 27</td><td>cell 28</td>
    </tr><tr>
    <td>cell 29</td><td>cell 30</td><td>cell 31</td><td>cell 32</td>
    </tr></tbody>
    </table>
    
    </div>
    
    </div>
    
    </body>
    </html>
    



Tags for this Thread