Variable width scrolling table with fixed header

**dpeterson** · 02:09 AM

OK, this is a toughy that I've been wrestling with for a while now. If anyone could help I would EXTREMELY grateful!

here's the link to the static version of what I have right now:

http://danvpeterson.com/aws/sites/my1p/unlocked.html

Right now it's just a static page temporarily held on my own site until I finish getting everything to work. Once done it will be put into rails and all the interactivity will be added (mostly JS).

The problem is the table you see in the top right. I found how a tutorial that helped me get this far here ( http://www.imaputz.com/cssStuff/bigFourVersion.html ) ... the problem is that I need the table to resize with the window (at least horizontally if not vertically)!

I can not for the life of me figure out how to make that work and still keep the thead columns lined up with the tbody while having the tbody scrollable. Preferably the first column should be 45%, the second 30%, and the third 25%. If necessary the second and third columns could be fixed width while the first takes up whatever space is left.

Also I'm trying to get the text to not wrap if it's wider than the column and to truncate (maybe just overflow:hidden) but that doesn't want to work right either.

Anyone have any ideas? I've been trying everything I can think of for over a month now (giving up and coming back).

**meloncholy** · 08:23 PM

Hmmm... I had a play with that and kinda got it working in Fx, but it fell over badly in IE and Opera. The problem is essentially that the code takes away a lot of the 'table-ness' from the table (e.g. making cells display block) and then uses a load of hacks to get it to work again. I gave up on this one I'm afraid.

A (possibly) better (or at least different) solution is here. Essentially, the trick used is to stick the table in a fixed height div with overflow: auto (so the table scrolls inside the div), then apply a fixed height to the tbody so - in Fx - only the table body scrolls and the head remains fixed. They use expressions in the CSS to get IE to keep the headings at the top (not so nice). It doesn't work in Opera.

For me at least, both of these examples (and your page) fell over in IE7 in standards mode - the cells took on the height of the tbody and couldn't be changed from this (no idea why). I'm not convinced that either of these is 'production ready' - they seem to be far too fragile and reliant on hacks to be anything more than a curiosity.

So I'm going to suggest cheating.

Separate the headers from the table and stick the table body in a fixed size div. Then the table can scroll and leave the heads fixed. Both the table 'head' and body are pushed 200px away from the left (for your sidebar) and then fill the rest of the window. You could certainly structure things a bit better, but it seems to work OK as a proof of concept. overflow-x kills the h scrollbar in Fx to make things prettier.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
		.Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; }
		
		.BigTable { width: 100%; }
		
		.BigTable td { width: 40%; }
		
		.BigTable td + td { width: 30%; }
		
		.BigTable td + td + td { width: 30%; }
		
		.Header { margin-left: 200px; height: 30px; background-color: blue; }
		
		.Header .Heading { width: 40%; float: left; height: 30px; }
		
		.Header .Heading + .Heading  { width: 30%; }
		
		.Header .Heading + .Heading + .Heading { width: 30%; }
		
    </style>
</head>
<body>
<div class="Header">
	<div class="Heading">Heading 1</div>
	<div class="Heading">Heading 2</div>
	<div class="Heading">Heading 3</div>
</div>
<div class="Container">
	<table class="BigTable">
		<tbody class="scrollContent">
			<tr class="normalRow">
				<td>Cell Content 1</td>
				<td>Cell Content 2</td>
				<td>Sep 16, 2007 01:54 AM</td>
			</tr>
			<tr class="alternateRow">
				<td>More Cell Content 1</td>
				<td>More Cell Content 2</td>
				<td>Sep 16, 2007 01:54 AM</td>
			</tr>
			<tr class="normalRow">
				<td>Even More Cell Content 1</td>
				<td>Even More Cell Content 2</td>
				<td>Sep 16, 2007 01:54 AM</td>
			</tr>

[i][More rows...][/i]

			<tr class="alternateRow">
				<td>And Repeat 1</td>
				<td>And Repeat 2</td>
				<td>Sep 16, 2007 01:54 AM</td>
			</tr>
		</tbody>
	</table>
</div>	

</body>
</html>

**dpeterson** · 09:48 PM

Thanks a lot for taking a look melancholy. I previously had it setup w/ the headers separate from the table but was trying to get away from that, may just have to go back. I'm actually first going for firefox and safari compatibility then opera, IE, and the rest. It's pretty much impossible to get this design to work right in IE 6 or below so I'm only going for IE 7 compatibility when I get to that point.

The reason I need the cells displayed as block is mainly because I need overflow:hidden, white-space:nowrap, and text-overflow:ellipsis(where supported). I'm mixing in a bit of CSS 3 for browsers that support it but obviously trying to make it break down as nicely as possible without it. I've never actually seen overflow-x (or overflow-y) before, looks like that was originally a Microsoft thing? I'll play with that to find out how much it's supported, overflow: auto can get screwed up sometimes w/ the h scrollbar. This is primarily for Mac because it's a web app version of a Mac app (1Password).

Thanks again, I'll keep pushing on. If anyone else has any ideas please let me know!

**meloncholy** · 01-02-2008, 10:00 PM

Have you looked at sticking things inside each cell? (Assume you probably have, as it was the first thing that came up when I searched.)

Anyway, I had a quick play with that, putting a span around the contents of each td (with the code I pasted above). I then applied lots of styling to the span.

HTML Code:

.BigTable td span { display: block; float: left; overflow: hidden; text-overflow: ellipsis; height: 1em; }

This may do what you want. Seems OK in Fx, IE7, Opera & Safari (Win). Adding white-space: nowrap; stops Safari & Opera from playing nicely. (Though it does add nice ellipses in IE.)

I know it's a little hacky, but - to me, anyway - it seems less so than the other fixed table examples.

Of any use?

PS overflow-x was new to me too.

**dpeterson** · 01-05-2008, 09:52 PM

Well thanks for trying to help meloncholy, it's appreciated. I ended up going a different route that isn't exactly what I wanted but looks good and works in all tested browsers so far. It's a fairly major hack but whatever, **** browsers. The thing that really gave me a hard time was Firefox's stupid scrollbars (at least on the Mac version). They really don't like absolute and/or fixed positioning, especially with overlapping elements. Took me a lot of hours to figure all this out based off a general idea that popped in my head (which your suggestions helped me come to).

I ended up using this html:

Code:

<!--This is a super hack job to get the table header to remain fixed, the columns to stay lined up, and the scrollbar to be covered up on the header-->
	<div id="scrollBarCoverContainer">
		
		<div id="scrollBarCoverUp"></div>

		<div class="tableHeaderShadow"></div>
		
	</div>

	<div id="listTableHeaders">
		
		<table id="entryListHeaders" border="0" cellpadding="0" cellspacing="0" width="100%">
		
		<thead class="fixedHeader">
			<tr>
				<th id="selectedHeader"><a href="#"><img class="sortArrow" src="images/interface/table_arrow_down.png" width="7" height="16" alt="" />Name</a></th>
				<th><a href="#">Domain</a></th>
				<th><a href="#">Modified</a></th>
			</tr>
		</thead>
		
		</table>
	</div>
<!--END hack job-->

and this CSS

Code:


#listBevel, #listTable {
	position: absolute;
	z-index: 2;
	border: 1px solid #989898;
	top: 85px;
	left: 227px;
	right: 37px;
	height: 270px;
	min-width: 654px;
}

/* @group List Table Headers */

#listTableHeaders {
	position: absolute;
	z-index: 3;
	top: 85px;
	left: 227px;
	right: 37px;
	height: 18px;
	min-width: 654px;
	border: 1px solid #989898;
	overflow: hidden;
	overflow-y: scroll;
}

.tableHeaderShadow {
	background: url(/images/interface/bevel_shadow.png) repeat-x;
	position: fixed;
	height: 5px;
	top: 105px;
	right: 53px;
	left: 228px;
	min-width: 639px;
}

#scrollBarCoverContainer {
	position: fixed;
	z-index: 5;
	top: 86px;
	left: 228px;
	right: 38px;
	height: 0;
	min-width: 654px;
	font-size: 11px;
	border: 1px none #989898;
	text-align: right;
}

#scrollBarCoverUp {
	background: url(/images/interface/list_header_bg.png) repeat-x;
	width: 14px;
	height: 18px;
	border-left: 1px solid #e5e5e5;
	float: right;
}

table#entryListHeaders th img.sortArrow {
	float: right;
}

table#entryListHeaders th a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 18px;
}

table#entryListHeaders th:hover {
	background-position: 0 -18px;
	cursor: default;
}

table#entryListHeaders th {
	background: url(/images/interface/list_header_bg.png) repeat-x;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #a5a5a5;
	text-align: left;
	padding: 0 5px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 18px;
	width: 42%;
	font-size: 11px;
	line-height: 1.6em;
	text-shadow: #fff 0 1px 0;
}
table#entryListHeaders th + th {
	width: 32%;
}

table#entryListHeaders th.selectedHeader {
	text-shadow: #d8e6ff 0 1px 0;
	background-image: url(/images/interface/list_header_selected.png);
	border-left-color: #c2d4f2;
}

#listTable {
	background-color: #fefefe;
	top: 104px;
	height: 251px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: scroll;
	font-size: 11px;
	border-collapse: collapse;
}

table#entryList {
}

table#entryList td {
	width: 42%;
}

span.truncateText {
	display: block;
	height: 18px;
	overflow: hidden;
}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	border-right: 1px hidden #cbd1d8;
	padding: 1px 5px;
	height: 18px;
	line-height: 1.6em;
	margin: 0;
	border-left-style: hidden;
	border-left-width: 1px;
}

tbody.scrollContent tr.alternateRow {
	background: #eaf2ff;
}

tbody.scrollContent tr.selectedRow td {
	background: url(/images/interface/selected_row.png) repeat-x;
	color: #fff;
	border-right-style: hidden;
}

table#entryList td + td {
	width: 32%;
}

tbody.scrollContent tr:hover, tbody.scrollContent tr.alternateRow:hover {
	background-color: #d8e7ff;
	cursor: default;
}

More than a bit convoluted but for now I'm just happy it works and is pretty (I'm more of a designer than coder)! I'll be getting rid of the .truncateText spans and just end up limiting the number of characters via JS and adding an ellipses. Not ideal but the only thing I can get to consistently work across browsers.

Thanks again and you can check out the static page here if you'd like:

http://danvpeterson.com/aws/sites/my1p/unlocked.html

It's almost all done being put into Rails now and should go live on their site pretty soon! I'm excited

. The previous version has been getting great reviews so I can't wait to see what people say to the new once the site goes from alpha to beta status! You can keep updated on what I'm doing with all this if interested at my.1password.com.

**bluejon** · 02-08-2008, 06:09 AM

There is an example of a table with fixed headers & footers in strict mode @ scrolltable.twrc.org.uk
bluejon

**FinibusBonorum** · 05-07-2008, 11:38 PM

Hi dpeterson:

Yeah, I've been struggling with this as well.

I tried Stu Nicholls' version (http://www.imaputz.com/cssStuff/bigFourVersion.html) but soon realized that, because the cell widths were hard-coded, the columns in the header & table body would become misaligned when viewed in different browsers.

As meloncholy suggested, I also looked at (http://home.tampabay.rr.com/bmerkey/...le-header.html) but can't remember why I rejected it.

So, I modified the Sort-and-Lock table (http://javascript.internet.com/misce...ock-table.html) by removing the sort feature [I didn't need it]. With this version, the header columns automatically line up with the table columns.

As you can see in my website-in-progress, (http://cossa-wrestling.110mb.com/index-contacts.html), on Windows XP, the headers and footers remain in fixed positions in Firefox 1.5, 2, & 3 [as well as Netscape 9]. In MSIE7 Standalone, just the table headers remain static and in MSIE 6, the table scrollbars also disappear [I also have problems with the hideable divisions in MSIE 6]. In Safari 3.1.1 for Windows & Opera 9.5, the headers & footers scroll with the table content. Finally, in Opera 9.27 and Netscape 8, the table overflows its container & the associated page division, and so, fixed headers & footers are at present a moot point. What the website looks like in other operating systems, I have no idea... Sigh...the joys of cross-browser compatibility.

If you want the table code, give me a few days and I'll throw together a content-reduced version.

"...I'm trying to get the text to not wrap..."

The old HTML trick was to insert NOWRAP within the desired TD tag ["<TD NOWRAP>"] but this just forces the column to become larger and doesn't truncate the displayed text

**bluejon** · 05-10-2008, 07:19 PM

To stop text wrapping have you tried style="white-space:nowrap;"
bluejon

01-02-2008, 01:21 AM	#1 (permalink) Variable width scrolling table with fixed header
dpeterson Junior Talker Posts: 3 Talkupation:	OK, this is a toughy that I've been wrestling with for a while now. If anyone could help I would EXTREMELY grateful! here's the link to the static version of what I have right now: http://danvpeterson.com/aws/sites/my1p/unlocked.html Right now it's just a static page temporarily held on my own site until I finish getting everything to work. Once done it will be put into rails and all the interactivity will be added (mostly JS). The problem is the table you see in the top right. I found how a tutorial that helped me get this far here ( http://www.imaputz.com/cssStuff/bigFourVersion.html ) ... the problem is that I need the table to resize with the window (at least horizontally if not vertically)! I can not for the life of me figure out how to make that work and still keep the thead columns lined up with the tbody while having the tbody scrollable. Preferably the first column should be 45%, the second 30%, and the third 25%. If necessary the second and third columns could be fixed width while the first takes up whatever space is left. Also I'm trying to get the text to not wrap if it's wider than the column and to truncate (maybe just overflow:hidden) but that doesn't want to work right either. Anyone have any ideas? I've been trying everything I can think of for over a month now (giving up and coming back). Last edited by dpeterson : 01-02-2008 at 02:09 AM.

01-02-2008, 08:22 PM	#2 (permalink) Re: Variable width scrolling table with fixed header
meloncholy Average Talker Latest Blog Post: PoleLove Pole Dancing Calendar Posts: 25 Name: Andrew Talkupation:	Hmmm... I had a play with that and kinda got it working in Fx, but it fell over badly in IE and Opera. The problem is essentially that the code takes away a lot of the 'table-ness' from the table (e.g. making cells display block) and then uses a load of hacks to get it to work again. I gave up on this one I'm afraid. A (possibly) better (or at least different) solution is here. Essentially, the trick used is to stick the table in a fixed height div with overflow: auto (so the table scrolls inside the div), then apply a fixed height to the tbody so - in Fx - only the table body scrolls and the head remains fixed. They use expressions in the CSS to get IE to keep the headings at the top (not so nice). It doesn't work in Opera. For me at least, both of these examples (and your page) fell over in IE7 in standards mode - the cells took on the height of the tbody and couldn't be changed from this (no idea why). I'm not convinced that either of these is 'production ready' - they seem to be far too fragile and reliant on hacks to be anything more than a curiosity. So I'm going to suggest cheating. Separate the headers from the table and stick the table body in a fixed size div. Then the table can scroll and leave the heads fixed. Both the table 'head' and body are pushed 200px away from the left (for your sidebar) and then fill the rest of the window. You could certainly structure things a bit better, but it seems to work OK as a proof of concept. overflow-x kills the h scrollbar in Fx to make things prettier. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <style type="text/css"> .Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; } .BigTable { width: 100%; } .BigTable td { width: 40%; } .BigTable td + td { width: 30%; } .BigTable td + td + td { width: 30%; } .Header { margin-left: 200px; height: 30px; background-color: blue; } .Header .Heading { width: 40%; float: left; height: 30px; } .Header .Heading + .Heading { width: 30%; } .Header .Heading + .Heading + .Heading { width: 30%; } </style> </head> <body> <div class="Header"> <div class="Heading">Heading 1</div> <div class="Heading">Heading 2</div> <div class="Heading">Heading 3</div> </div> <div class="Container"> <table class="BigTable"> <tbody class="scrollContent"> <tr class="normalRow"> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> <tr class="alternateRow"> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> <tr class="normalRow"> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> [i][More rows...][/i] <tr class="alternateRow"> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>Sep 16, 2007 01:54 AM</td> </tr> </tbody> </table> </div> </body> </html> __________________ Pole Exercise - Pole dancing evolved Last edited by meloncholy : 01-02-2008 at 08:23 PM. Reason: Can't spell 'too'...

01-02-2008, 09:24 PM	#3 (permalink) Re: Variable width scrolling table with fixed header
dpeterson Junior Talker Posts: 3 Talkupation:	Thanks a lot for taking a look melancholy. I previously had it setup w/ the headers separate from the table but was trying to get away from that, may just have to go back. I'm actually first going for firefox and safari compatibility then opera, IE, and the rest. It's pretty much impossible to get this design to work right in IE 6 or below so I'm only going for IE 7 compatibility when I get to that point. The reason I need the cells displayed as block is mainly because I need overflow:hidden, white-space:nowrap, and text-overflow:ellipsis(where supported). I'm mixing in a bit of CSS 3 for browsers that support it but obviously trying to make it break down as nicely as possible without it. I've never actually seen overflow-x (or overflow-y) before, looks like that was originally a Microsoft thing? I'll play with that to find out how much it's supported, overflow: auto can get screwed up sometimes w/ the h scrollbar. This is primarily for Mac because it's a web app version of a Mac app (1Password). Thanks again, I'll keep pushing on. If anyone else has any ideas please let me know! Last edited by dpeterson : 01-02-2008 at 09:48 PM.

01-02-2008, 10:00 PM	#4 (permalink) Re: Variable width scrolling table with fixed header
meloncholy Average Talker Latest Blog Post: PoleLove Pole Dancing Calendar Posts: 25 Name: Andrew Talkupation:	Have you looked at sticking things inside each cell? (Assume you probably have, as it was the first thing that came up when I searched.) Anyway, I had a quick play with that, putting a span around the contents of each td (with the code I pasted above). I then applied lots of styling to the span. HTML Code: .BigTable td span { display: block; float: left; overflow: hidden; text-overflow: ellipsis; height: 1em; } This may do what you want. Seems OK in Fx, IE7, Opera & Safari (Win). Adding white-space: nowrap; stops Safari & Opera from playing nicely. (Though it does add nice ellipses in IE.) I know it's a little hacky, but - to me, anyway - it seems less so than the other fixed table examples. Of any use? PS overflow-x was new to me too. __________________ Pole Exercise - Pole dancing evolved

02-08-2008, 06:09 AM	#6 (permalink) Re: Variable width scrolling table with fixed header
bluejon Junior Talker Posts: 3 Name: jon Talkupation:	There is an example of a table with fixed headers & footers in strict mode @ scrolltable.twrc.org.uk bluejon

05-07-2008, 11:38 PM	#7 (permalink) Re: Variable width scrolling table with fixed header
FinibusBonorum Junior Talker Posts: 1 Talkupation:	Hi dpeterson: Yeah, I've been struggling with this as well. I tried Stu Nicholls' version (http://www.imaputz.com/cssStuff/bigFourVersion.html) but soon realized that, because the cell widths were hard-coded, the columns in the header & table body would become misaligned when viewed in different browsers. As meloncholy suggested, I also looked at (http://home.tampabay.rr.com/bmerkey/...le-header.html) but can't remember why I rejected it. So, I modified the Sort-and-Lock table (http://javascript.internet.com/misce...ock-table.html) by removing the sort feature [I didn't need it]. With this version, the header columns automatically line up with the table columns. As you can see in my website-in-progress, (http://cossa-wrestling.110mb.com/index-contacts.html), on Windows XP, the headers and footers remain in fixed positions in Firefox 1.5, 2, & 3 [as well as Netscape 9]. In MSIE7 Standalone, just the table headers remain static and in MSIE 6, the table scrollbars also disappear [I also have problems with the hideable divisions in MSIE 6]. In Safari 3.1.1 for Windows & Opera 9.5, the headers & footers scroll with the table content. Finally, in Opera 9.27 and Netscape 8, the table overflows its container & the associated page division, and so, fixed headers & footers are at present a moot point. What the website looks like in other operating systems, I have no idea... Sigh...the joys of cross-browser compatibility. If you want the table code, give me a few days and I'll throw together a content-reduced version. "...I'm trying to get the text to not wrap..." The old HTML trick was to insert NOWRAP within the desired TD tag ["<TD NOWRAP>"] but this just forces the column to become larger and doesn't truncate the displayed text

05-10-2008, 07:19 PM	#8 (permalink) Re: Variable width scrolling table with fixed header
bluejon Junior Talker Posts: 3 Name: jon Talkupation:	To stop text wrapping have you tried style="white-space:nowrap;" bluejon