/    Sign up×
Community /Pin to ProfileBookmark

Freeze Html Table Headers

Hi,

Please let me knw the cross browser solution for all freezing the table headers, so that if records are more on scrolling down the page, still i can see the headers.

Thanks.

to post a comment
HTML

1 Comments(s)

Copy linkTweet thisAlerts:
@felgallOct 13.2006 — The first step would be to surround the table headers inside a <thead> tag and put the body of the table inside <tbody> so that the CSS and Javascript that you add to create the effect will know what row(s) make up the heading. The HTML tags look like this:

<table>

<thead>

<tr><th></th><th></th></tr>

</thead>

<tbody>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

</tbody>

</table>

You will then need to add stylesheet code to apply relative positioning to the table and absolute positioning to the thead.

Finally you will need Javascript to move the thead down as the table content scrolls under it.
×

Success!

Help @sam20032k spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...