Scrolling TBODY

Hi,

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:

<table>
<thead>
   <tr>
      <th>Code</th>
      <th>Description</th>
   </tr>
</thead>
<tbody style="overflow: auto; height: 200px;">
   <tr class="odd">
      <td>asb</td>
      <td>asb</td>
   </tr>
   .....
   .....
</tbody>
</table>

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,
Michael
LVL 1
Xavior2K3Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
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.

-r-
0
Xavior2K3Author Commented:
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.
Thanks
0
Xavior2K3Author Commented:
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?
0
RoonaanCommented:
You could have:

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

-r-
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.