CODEWITHSUNDEEP
javascriptjqueryhtml
Rahul Desai
Rahul Desai

Reputation: 15491

styling floating table headers

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

Upvotes: 0

Views: 830

Answers (2)

Frode
Frode

Reputation: 5710

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/

Upvotes: 2

Charles
Charles

Reputation: 648

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.

Upvotes: 0

Related Questions