0

I am using the JavaScript/jQuery script available here to have the table headers floating while scrolling down/up. My table is center aligned. When I scroll down, the headers float but they get left aligned, rest of the table is center aligned though. Here is the snapshot of the output that I am getting right now:

Here is the snapshot of the output that I am getting right now:

What exactly do I need to edit in this JavaScript/jQuery code or my PHP/HTML code to have them center aligned?

Update

Example of problem

Community
  • 1
  • 1
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138

2 Answers2

2

It's not the most elegant of scripts you've found, so I think yaponyal's advice is sound.

There were a few reasons why your fiddle didn't work: jsfiddle doesn't like the script's direct onload event attachment, so you can change it to: 

window.addEvent("domready", function() {
    this.build_header();
});

Additionally, the setheader function that runs every time you scroll, has to also set a horizontal position for the header.

this.header.style.left = this.table_obj.offsetLeft + "px";

See here for the reason why it can't be automatically centered. You could instead modify the script to put the cloned table header in a div with centered text alignment if you wanted to.

Also, the script sets a top value for the header without appending "px". That didn't work in my browser, I had to change it into:

this.header.style.top=Math.round(screenpos) + "px";

http://jsfiddle.net/VHaaw/3/

Community
  • 1
  • 1
Frode
  • 5,600
  • 1
  • 25
  • 25
  • Thank you for the answer. I am trying to use the plugin that yaponyal suggested, but have difficulty in using it. I added the following code to my code: The tagging is done properly, however, its not working as expected, what am I missing? – Rahul Desai Jun 08 '12 at 15:28
  • @rad: See this fiddle: http://jsfiddle.net/VHaaw/5/ I had to put the table in a div with the size I wanted. Not sure if that's the author's intention or what though. – Frode Jun 08 '12 at 16:06
  • I am going with this one: http://jsfiddle.net/VHaaw/6/ As a next step, I want to add the header at the bottom too! Any help is appreciated. – Rahul Desai Jun 11 '12 at 13:40
0

On page load, does the header appear right at the top? If so, I would suggest detaching the header into a separate div, styling it according to your needs and then setting a position fixed to the div. You can use the css property margin: 0 auto; to center data according to the width of the page.

Charles
  • 638
  • 2
  • 9
  • 23