[dpeterson]

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:

my1Password

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 ( Pure CSS Scrollable Table with Fixed Header ) ... 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). I have a crappy workaround in place on the live site right now but I'm really not satisfied with it.

[dpeterson]

Well if anyone attempted to help on this but couldn't get anywhere, thanks! 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 ... damn 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 a couple nights ago.

I ended up using this html:

<!--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

#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 and since the full info will be in the below details pain I think it's good enough.

You can check out the static page here if you'd like:

my1Password

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. Should go from beta to a live release within the next month or so.