• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 907
  • Last Modified:

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
0
Xavior2K3
Asked:
Xavior2K3
  • 2
  • 2
1 Solution
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now