SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrollable tables

    Hi

    I've got a long list of data in a table and I'm using the correct markup to split the different sections (ie. thead, tbody & tfoot).

    Is there a way of using CSS to make the table a fixed height and all the content in the tbody element scrollable? I'm sure I read somewhere that this was one of the reasons for implementing the 3 different sections in your table (so the header and footer were still available for long lists of tabular data).

    I'm sure someone can shed some light on this (PaulO'B )

    Cheers!
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  2. #2
    SitePoint Zealot pionar's Avatar
    Join Date
    Nov 2003
    Location
    Indianapolis
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try looking at the overflow property in a css reference. that might be able to help you. never had to use it before, but from what i've read about it, this is the sort of thing it's there for.

    You could put the non-thead and tfoot cells in an iframe, though I don't know how valid that method is, or even if it would work. I'm not an iframe expert.

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    off the top of my head: on the tbody, set a fixed height, and set overflow to scroll, something like this:
    Code:
    tbody {
     height: 100px; /* or whatever */
     overflow: scroll;
     }
    Disclaimer: I've not tested this, I've no idea how well it will work, and I'll be very surprised if it works cross-browser.

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, one bit of mad hackery later:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
       <title>scrolling tables?</title>
       <style type="text/css">
      tbody {
        height: 100px;
        overflow: auto;
      }
       </style>
      </head>
      <body>
      <table>
      <thead><tr><th>header!header!header!header!header!header!</th></tr></thead>
      <tfoot><tr><td>footer!footer!footer!footer!footer!footer!</td></tr></tfoot>
       <tbody>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
        <tr><td>row</td></tr>
      </tbody>
    </table>
      </body>
      </html>
    Sorta works in mozilla firefox (OK, but ugly horizontal scrollbar)
    Goes horribly wrong in IE6
    no idea about opera.

    [edit: fixed the html to have the tfoot before the tbody, like wot it's s'posed to. Didn't help IE6.]

  5. #5
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would work quite well if it wasn't for the horizontal scroll bar... anyone know of an IE fix (it's for the Intranet at work and everyone uses IE - bit of an a*se!)
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  6. #6
    SitePoint Member
    Join Date
    Jun 2004
    Location
    UK
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    try this

    I had this same problem some time ago and found that this worked quite well (IE only)

    wrap the whole table in a
    Code:
    <div style="overflow:auto";height:100px">
    then on your header tag (<tr> or <thead>)
    add this style:
    Code:
    <tr style="position:relative; top:expression(this.offsetParent.scrollTop -5);left: -1">
    you may have to fiddle with the "top" and "left" attributes to get it in exactly the right place, but it works ok.

    hope thats of some help.


Bookmarks

Posting Permissions

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