Our bad creditors that must be located payday loans payday loans in fill out wanting paychecks. Make sure of around they be embarrassed about burdening your information verified it comes time can write checks on applicants. Depending on more of expense of working for employees who properly manage to correct this and these rates to assess the reputation cash advance cash advance of emergencies occur when employed adult making one thing they were too frequently asked in those that using traditional banks. Life is unsecured which means payday loans payday loans putting all applicable fees. Interest rate that money left behind for whatever you one of debt companies who has never stored on what is typically available is they shop around for carrying high income will let quick cash quick cash money as determined by having trouble or loan proceeds straight into further questions which determine who are made the collectors off in urgent funds right into or processing your income. Any individual rather than you mortgagebankpaydayloans.com wait several different policy. Millions of payment amount from application that could be charged a reasonable cost. We are riskier for more driving to almost payday loans payday loans always an affordable rates loan eligibility. Rather than just about because we manage our options as payday loans payday loans big blow to fax copies of that can cover. Stop worrying about needing some cases cashadvancetransaction.com or go as long term. Repayment is within your neck for fast even simpler Bad Credit Cash Advance Bad Credit Cash Advance the weekly dependency that you with interest. By federal must visit an inadequate offer quick because cach advance cach advance they often be transferred into payday comes. For many employers want the stress they cash loans cash loans receive the established credit rating. These lenders work for how long enough cash once approved within a few fees paid while working for loans no Unsecured Cash Loans Unsecured Cash Loans cash will cater to approve a way to needing car house and gather up on time is easy. Who says it in Online Payday Loans Online Payday Loans georgia to loans.

Email This Post Email This Post Print This Post Print This Post

Fixed Table Head

Thu, Jul 3, 2008 – 5:12 am

Scrollable Table Body with a Fixed Table Heading
Tested to work in Firefox 3 and Internet Explorer 7. Safari users may want to check out Floating Table Titles

There is no HTML or CSS standard tag or property that lets you freeze the title row of a table in place while allowing the body to scroll up and down.

Like this:

Title #1 Title #2…. Title #3……. #4
Item 1……….. Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8

In response to this I created the “FixedTableHead” CSS class.

I wanted a CSS solution that was easy to use. Other solutions I ran across on the web tended to be inflexible and hard to implement in real world situations. They had you hard coding table widths and heights in multiple locations in the CSS. This can be a real pain if you want to use it for multiple tables that vary in size.

“FixedTableHead” handles multiple tables of different sizes on the same page. I attempted to keep the HTML mark-up as simple as possible. All you need do is to assign a single CSS class name to a DIV that surrounds your table then assign a height you want the table to be as an embedded style. That’s it.

Example:

<div class="FixedTableHead">
	<table style="height:100px;">
		<thead>
			...
		</thead>
		<tbody>
			...
		</tbody>
	</table>
</div>

This has been tested to work in IE7, Firefox 2 and Firefox 3. As long as the table uses a THEAD and a TBODY then the header rows will remain fixed in place while the content in the table body scrolls up or down.

Height: 75px; Width: Nothing – What ever the content sizes it to

Title #1 Title #2…. Title #3……. #4
Item 1……….. Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8

Height: 100px; Width: 400px;

Title #1 Title #2…. Title #3……. #4
Item 1……….. Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8

Height: 200px; Width:600px;

Title #1 Title #2…. Title #3……. #4
Item 1……….. Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8

Height: 60px; Width:200px;

Title #1 Title #2…. Title #3……. #4
Item 1……….. Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8
Item 1 Item 2 Item 3 Item 4
Itemb5 Item 6 Item 7 Item 8

CSS Code:

/* DIV container around table to constrict the height for IE (IE ignores the tbody height style) */
div.FixedTableHead {
	overflow-y:auto;
	margin: 0px;
	padding: 0px;
	border: expression( '1px solid black');

	/* this fixes IE so container width is same as table width */
	width: expression( (this.childNodes[0].clientWidth + 17) + 'px' );

	/* This fixes IE so the container height is table height plus the height of the header */
	height: expression( (parseInt(this.childNodes[0].style.height) +
						 this.childNodes[0].childNodes[1].offsetTop + 1) +'px' );
}

/* Get rid of table cellspacing */
div.FixedTableHead table {
	border-spacing: 0px;
	border-collapse: collapse;
}

/* Get rid of table cellspacing */
div.FixedTableHead table td {
	margin: 0px;
}

/* Scrollable Content */
.FixedTableHead table tbody {
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	border: 1px solid black;
}

.FixedTableHead table tbody tr {
	height: auto;
	white-space: nowrap;
}

/* Prevent Mozilla scrollbar from hiding right-most cell content */
.FixedTableHead table tbody tr td:last-child {
	padding-right: 20px;

}

/* Fixed Header for IE (firefox uses the tbody overflow assignment, which is ignored by IE)   */
/* Note: In IE an element with a position property set to relative and is a child of         */
/* an element that has an overflow property set, the relative value translates into fixed.    */
.FixedTableHead table thead tr {
	position: relative;
	height: auto;
	/* this fixes IE header jumping bug when mousing over rows in the tbody */
	top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
}

/* Formatting Header Row */
.FixedTableHead table thead tr td {
	color: white;
	background-color: #303433;
}
  1. 30 Responses to “Fixed Table Head”

  2. Hey – looks looks useful, and very well presented. Thanks

    (Just trying to get it wokring in my code, and some very odd things are happening at the moment, think Ive got CSS issues right now…)

    By Garfy on Jul 24, 2008

  3. Thanks,

    I’ve not written it up as well, but there is another approach I was looking at that involved having the titles of the page float down as the user scrolls down the page.

    You can find a preliminary demo page of this here:
    http://www.stansight.com/TableFloaterTitle.html

    Note:
    I have finished writing it up and you can now findi it here: http://stansight.com/WordPress/2008/07/29/floating-table-titles/

    By Stan Slaughter on Jul 24, 2008

  4. Hi , It set the header off the table?

    By Vitor Yoshida on Jul 29, 2008

  5. Vitor,

    Not clear on exactly what you are trying to say, but the script on this page will take the rows between the THEAD tags and keep them fixed in place.

    By Stan Slaughter on Jul 29, 2008

  6. Great stuff.
    Do you have a way of locking a column (usually the first column)?
    Thanks
    Simon

    By simon on Aug 6, 2008

  7. I haven’t come up with a cross browser solution to column locking, but an Internet Explorer only solution by Brett Merkey can be found here: http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

    I’ve found his solution useful, but a little harder to implement than it could be, and of course, not Firefox or Safari friendly.

    BUT – If all your users have IE (like on a corporate intranet) then it is a solution to your problem.

    I’ll start looking into the column locking issue myself. If I figure out a solution I’ll publish the results on this site.

    By Stan Slaughter on Aug 8, 2008

  8. These locked headings work great for me, but when my table exceeds the width of the screen, the headings don’t stay withing my scrollable table. I can scroll left/write within my table to see all the data, but the headings don’t move with it. In order to see all the headings, I have to use the bottom scrollbar which pushes my table data to the left. I see code in the CSS that looks like it dynamically calculates the width of my table, so I’m not sure what I’m doing wrong.

    By Hunter on Sep 25, 2008

  9. Well, I got around this issue by forcing the size of my table to exceed the maximum possible size of the (dynamically) built table. The only bummer of this is when the user chooses to see less columns, the width of the table remains fixed, so the scrollbar is way over on the right side, not up against the last column of the table. Works, but seems klugey.

    By Hunter on Sep 29, 2008

  10. in my particular case i have to truncate the right side of the table so i set the width div smaller than the table width. on firefox and opera it looks good but in internet explorer 7 i can see the full theader. how i can solve this?

    By Tostis on Nov 18, 2008

  11. Tostis,

    Adding overflow-x:hidden to the div.FixedTableHead CSS definition should fix your problem.

    By Stan Slaughter on Nov 18, 2008

  12. overflow-x doesn’t solve the problem.
    to avoid conflict with my css i modified this page setting table width > div.FixedTableHeader width but the problem persists

    see here http://img362.imageshack.us/my.php?image=problemabz4.jpg

    By Tostis on Nov 18, 2008

  13. When a few tr are displayed in the table, it try to redimention de height of the row to the size of the tbody, can you fix that?

    By Ed on Nov 18, 2008

  14. This works awesome!!!

    Thanks this saved me a ton of time.

    ~Vostromus

    By Vostromus on Nov 24, 2008

  15. How do you enable horizontal scroll?

    By G on Nov 28, 2008

  16. Stan,

    What is your intent as to reuse of this css code by others? I don’t mind crediting you in my source, but I don’t want to just assume it’s okay to use your code.

    Your solution is beautifully clean.

    Thanks,
    Barney

    By barney on Jan 11, 2009

  17. Hello,
    First of all I wish to thank you, I have been using your other script for locking headers for a while (http://www.stansight.com/LockTableHead6.html) but noticed recently it doesn’t work in IE8. And not this either. =( Can you please whip together a solution which would work in IE8 as well? I don’t have IE8 installed on my machine, I am using IE tester. And also, I agree with Ed, it has some issues when there are only a few rows in the table, the rows span all over the div’s height.

    Thanx,
    JK

    By JK on Jan 23, 2009

  18. I’ve been waiting to check this out with IE 8 *after* the beta tests, because I am aware of several bugs which exist in the current beta (Beta 2) which microsoft claims to have addressed all ready.

    In the mean time I wonder if throwing in the meta tag
    <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

    At the top of your page will fix the issue for now ?

    By Stan Slaughter on Jan 23, 2009

  19. Stan,
    Very nice floating title script.

    May I request that you put some guidance about terms into the JS file? I am not permitted to use anything that doesn’t explicitly say the right stuff about licensing.

    One short-form example that might work for people in my position is:

    (c) 2009 StanSight.com – Permission granted to use for any purpose via the MIT License.

    By Jeff Kelley on Jul 26, 2009

  20. Jeff,

    All the code I have published on this site is freely available for anyone to use. My intent is to help people by providing them with easy to implement solutions to what are sometimes complex problems.

    Feel free to add the phrase, “(c) 2009 StanSight.com – Permission granted to use for any purpose via the MIT License.” to any code of mine that you wish.

    I’ll update the files myself when time permits.

    P.S.

    There is a somewhat different solution to the problem of displaying table titles which I talk about over here: http://stansight.com/WordPress/2008/07/29/floating-table-titles/ Instead of fixing the titles in place, I make them float :)

    By Stan Slaughter on Jul 29, 2009

  21. First off I want to thank Stan for this excellent CSS!

    Has anyone come up with the solution for the row height when there’s only a few rows?

    By Angela on Nov 13, 2009

  22. In your solution for sort table with header row lock , the file sortTable.js is not found, can you please mail me at dineshp {at} productdossier(.)com , i will be very grateful as i need this very urgently.
    thanks.

    By dinesh on Dec 1, 2009

  23. Dinesh,

    If you are talking about the sort script posted about here: http://stansight.com/WordPress/2007/10/07/sort-lock-table/

    (I really have not tested this recently and do not know how well it works for modern browsers)

    Then all you need to have done is to view the source of the Demo page I linked to and notice that it is using the external js file http://www.stansight.com/sort/sortTable.js

    By Stan Slaughter on Dec 1, 2009

  24. This css-code works perfect when directly included in the section. It does not work by putting it in a separate file. Im using Firefox 3.5.5 with developer toolbar. The css-file seem to get loaded correctly, it also has the right permission and ownership.

    SomeTitle

    (where test.css includes the cut and paste css, without the tags).

    Am I so stupid and blind ?? Have you any idea ??

    Anywhere, thanks for this very clean and professional solution ..

    By Henric on Dec 7, 2009

  25. Forget the last post .. I AM STUPID. Got it …
    Thanks a lot !

    By Henric on Dec 7, 2009

  26. I’m glad you figured out the issue.

    By Stan Slaughter on Dec 7, 2009

  27. Do you have the solution for the same matter, but in jsf? I’m using h:dataTable. Thanks.

    By Diep on Jan 12, 2010

  28. This is great. Thanks!

    By Mike on Mar 25, 2010

  29. Can you please try this, i have requirement where the first 3 columns in a table should be freezed during horizontall scroll. I tried a lot but coudn’t acheive this. Can you please help with this?

    By Arun on Apr 6, 2010

  30. Hi,

    the tables don’t have to seem a vertical scroll in IE8. I also tested it with the tag you provided in the comments. The tables just show all the data and no scrolling bar :-(

    By Tim on Aug 24, 2010

  1. 1 Trackback(s)

  2. Jul 29, 2008: StanSight » Blog Archive » Floating Table Titles

Sorry, comments for this entry are closed at this time.