Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    scroll bar in table

    i'm working with tables but when i scroll down al the tables scroll down too nut i want only that the middlest table scrolls

    how can i put a scrollbar in tables?
    i need only a scrollbar in the middle table...

    see the picture


  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    TBODY
    {overflow:scroll;
    }
    however, looking the picture posted..... where is the table???

    maybe you do not need the table after all...
    Last edited by Vladdy; 07-09-2002 at 11:55 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Vladdy
    TBODY
    {overflow:scroll;
    }
    however, looking the picture posted..... where is the table???

    maybe you do not need the table after all...
    i mean in the lay-out table

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1. Loose the table
    2. Use overflow:scroll with your content division...
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ontario, Canada
    Posts
    183
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's what frames are for
    Offtone.com - In the works...

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    185
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Theoretically, you can use the THEAD, TBODY and TFOOT tags to break a table up into headers, footers and data. Then use a style of overflow:auto and set a specific height on the TBODY tag so only that section scrolls.

    As far as I know, it only works with Gecko-based browsers (i.e. not IE). Here's a sample page:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Table Test</title>
    <style type="text/css">
    
    body {
      font-family: sans-serif;
    }
    
    table {
      border-color: #000000;
      border-spacing: 0px;
      border-style: solid;
      border-width: 2px;
      cell-spacing: 0px;
      margin-left: auto;
      margin-right: auto;
    }
    
    tbody.scrolling {
      overflow: auto;
    }
    
    td, th {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10pt;
      padding: 2px;
      padding-left: 6px;
      padding-right: 6px;
    }
    
    td.numeric {
      text-align: right;
    }
    
    th.numeric {
      text-align: right;
    }
    
    tr.alt {
      background-color: #c0f0c0;
    }
    
    </style>
    </head>
    <body>
    
    <table cellpadding="0" cellspacing="0">
    <thead>
      <tr style="background-color:#008000;color:#ffffff;">
        <th>Number</th>
        <th>Date</th>
        <th>Description</th>
        <th>Amount</th>
        <th>Tax</th>
        <th>Balance</th>
    </tr>
    <tr style="background-color:#90c090;color:#000000;">
        <th colspan=5 style="text-align:right;">Starting Balance</th>
        <th class="numeric">$5153.89&nbsp;&nbsp;&nbsp;&nbsp;</th>
    </tr>
    </thead>
    <tfoot>
    <tr style="background-color:#90c090;color:#000000;">
        <th colspan=5 style="text-align:right;">Ending Balance</th>
        <th class="numeric">$5881.95&nbsp;&nbsp;&nbsp;&nbsp;</th>
    </tr>
    </tfoot>
    <tbody class="scrolling" style="max-height:14ex;">
    <tr>
      <td class="numeric">C1487</td>
      <td class="numeric">04/05/00</td>
      <td>Benton Bakery</td>
      <td class="numeric">-$32.14</td>
      <td>&nbsp;</td>
      <td class="numeric">$5121.75&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr class="alt">
      <td class="numeric">C1488</td>
      <td class="numeric">04/05/00</td>
      <td>Dave's Dry Cleaning</td>
      <td class="numeric">-$14.21</td>
      <td>&nbsp;</td>
      <td class="numeric">$5107.54&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td class="numeric">&nbsp;</td>
      <td class="numeric">04/07/00</td>
      <td>Deposit</td>
      <td class="numeric">$1231.57</td>
      <td>&nbsp;</td>
      <td class="numeric">$6339.11&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr class="alt">
      <td class="numeric">DC102341</td>
      <td class="numeric">04/07/00</td>
      <td>Murray's</td>
      <td class="numeric">-$54.31</td>
      <td>Y</td>
      <td class="numeric">$6284.80&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td class="numeric">C1488</td>
      <td class="numeric">04/08/00</td>
      <td>Greatland Auto Insurance</td>
      <td class="numeric">-$119.52</td>
      <td>&nbsp;</td>
      <td class="numeric">$6165.28&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr class="alt">
      <td class="numeric">C1489</td>
      <td class="numeric">04/08/00</td>
      <td>Northeast Energy</td>
      <td class="numeric">-$68.21</td>
      <td>&nbsp;</td>
      <td class="numeric">$6097.07&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td class="numeric">DC115982</td>
      <td class="numeric">04/10/00</td>
      <td>Mobile</td>
      <td class="numeric">-$22.19</td>
      <td>Y</td>
      <td class="numeric">$6074.88&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr class="alt">
      <td class="numeric">C1490</td>
      <td class="numeric">04/11/00</td>
      <td>Consolidated Communications</td>
      <td class="numeric">-$32.81</td>
      <td>&nbsp;</td>
      <td class="numeric">$6042.07&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td class="numeric">C1490</td>
      <td class="numeric">04/12/00</td>
      <td>Star Cable</td>
      <td class="numeric">-$57.51</td>
      <td>&nbsp;</td>
      <td class="numeric">$5984.56&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr class="alt">
      <td class="numeric">DC145998</td>
      <td class="numeric">04/14/00</td>
      <td>MegaBuy Office Supply</td>
      <td class="numeric">-$102.61</td>
      <td>Y</td>
      <td class="numeric">$5881.95&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Dallas, Texas
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what about using an iframe?
    http://www.dallasair.org/aqi.html

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Frames are no longer part of HTML standard.
    You can achieve the same effect using scrollable elements.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #9
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Vladdy
    Frames are no longer part of HTML standard.
    You can achieve the same effect using scrollable elements.
    Hardly, they are still in the doctype XHTML 1.1 uses (which uses the modular XHTML one for some stuff):

    http://www.w3.org/TR/2001/REC-xhtml-..._module_Frames

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I meant HTML Strict. Sorry.
    The recomendation is to move away from them.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #11
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    yeah, but he suggested an iframe, not frames, and iframes are standard, and actually important for many, more-advanced scripting functions.

    however, brainjar's solution is probably the best, and it will work in IE, too. will work in IE5, too, IIRC.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.


  •  

    Posting Permissions

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