Win a copy of Node.js Design Patterns: Design and implement production-grade Node.js applications using proven patterns and techniques this week in the Server-Side JavaScript and NodeJS forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

Regarding Div tag and Table header being scrolled

 
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

I am facing an issue with the table header being scrolled off along with the contents of my table body.
The way I am inserting rows in my table is by invoking my won javascript function which adds a row by getting the "table" object (using the id) and invoking the insertCell() method on the table. there are no explicit <tr> and <td> tags in my page.

The screen layout is:
<div style="height: 175px; width: 800px; overflow: auto">
<table id="tb">
<headers>
// invoking my javascript function based on conditions for inserting rows
</table>
</div>

I tried placing the div tag after the headers, but the layout totally changes and moves in the lower half of the screen.
I also tried putting the headers in a new table above the table that holds the rows, but the aligmment changes and the headers are not directly above the content rows.

Can you give me a solution so that I have the scrollbar only for the rows of the table and not the header?

Thanks in advance.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
http://www.imaputz.com/cssStuff/bigFourVersion.html
 
Harsha Pherwani
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Eric
Thanks for the help. It works to a great extent, but I am still facing one problem.

After the TBODY tag, I have to give 1 blank row (Empty td tags in the tr tags)
If I do not provide this, and just have my insert (javascript function) calls to insert rows in the table, then all the data only gets populated in the first column; row by row and that too without a scroll bar.
But if I do provide an empty row, then all the data is formatted correctly in their columns and a scroll bar is also provided only for the table rows. Header is not scrolled off.

Can you please tell me how I can avoid adding that empty row?

Thanks.
[ August 11, 2005: Message edited by: Harsha Pherwani ]
 
Harsha Pherwani
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I do want to add one more thing. This problem of adding an empty row is only for Mozilla browser. Works perfectly well with IE.
 
reply
    Bookmark Topic Watch Topic
  • New Topic