Scrolling TBODY

Posted on 2006-04-14
Last Modified: 2008-01-09

I have a simple table with 2 columns. They can be variable or fixed width, which ever is easiest.  I want to scroll the rows whilst leaving the headers stationary.  I have tried this:

<tbody style="overflow: auto; height: 200px;">
   <tr class="odd">

But in FF, there is a horizontal scrollbar i cannot get rid of. I have tried adding padding to the tbody and a whole bunch of other things. And in IE.. well its pretty obvious that it looks even more wrong.  The table rows have picked up the height attribute of the tbody.

How can this be done in IE & FF?

Kind Regards,
Question by:Xavior2K3
    LVL 49

    Expert Comment

    Easiest is to use fixed-width rows and use two separate tables. One for the header, the second for the content.
    Then place the second in a <div style="overflow:auto">

    For msIE, you can try to add <tbody style="display:block;overflow:auto;height:200px;">, but not sure if that works.

    LVL 1

    Author Comment

    Yea i think for now at least thats what i'll do.  I would like to keep this open still to see how variable width could be done.
    LVL 1

    Author Comment

    I'm having a little problem with seperating the headers and the table rows.  I am adding rows dynamically. My problem is that when i add rows to an empty table, firefox ignores the width of the columns and displays them incorrectly.  If i then clear the table and re-add the rows, it works fine!

    Anyone have any ideas?
    LVL 49

    Accepted Solution

    You could have:

    <table style="table-layout:fixed" ..>
      <col style="width:100px;" />
      <col style="width:300px;" />
      .. rows ..


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now