Monday 22 October 2007

Make table tboby scroll with thead an tfoot fixed on both IE5+ anbd Firefox

Par Vincent DEMAY, Monday 22 October 2007 :: Wicket

Make a table to be fixed size with a given height and a thead and tfoot fixed is a real nightmare with Internet Explorer.
After spending a lot of time to do the follwing CSS to make it possible I decide to make this code public on my blog.
Live example

This code is Firefox and IE5+ Compatible 

<html>
<head>
<style type="text/css">
div.tableContainer {
	width: 500px;		/* table width will be 99% of this*/
	height: 290px; 		/* must be greater than tbody*/
	overflow: auto;
	margin: 0 auto;
	}

table {
	width: 99%;		/*100% of container produces horiz. scroll in Mozilla*/
	border: none;
	background-color: #f7f7f7;
}

/*
 * Specific Firefox. Only Modern browser are able to interpret > . IE is not a modern browser
 */	
table>tbody { 
	overflow: auto; 
	height: 250px;
	overflow-x: hidden;
}

/*
 * Traget is IE5+ only. Only IE is able to interpret this kind of horrible expression Script
 * ----------
 * FOR HEADER
 */
thead tr {
	position:relative; 
	top: expression(offsetParent.scrollTop);
}

/*
 * Traget is IE5+ only. Only IE is able to interpret this kind of horrible expression Script
 * ----------
 * FOR FOOTER
 * ----------
 * Some explaination : 
 * with pseudo code : 
 * if (scroll_is_needed){
 * 	top = container_height + table_scrollTop - table_Height
 * } else {
 * 	//tfoot should be at the same place if there is a scroll or not
 *	top = container_height - table_height;
 * }
 */
table tfoot tr {
      position: relative; 
      overflow-x: hidden;
      top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 
		offsetParent.offsetHeight + offsetParent.scrollTop - parentNode.parentNode.offsetHeight : 
		offsetParent.offsetHeight - parentNode.parentNode.offsetHeight);
}

/*
 * Classical Css
 */	
thead td, thead th, tfoot td {
	text-align: center;
	background-color: #C3C3C3;
	font-size : 12px;
	color: white;
	font-weight: bold;
	border-top: solid 1px gray;
}	
	
td {
	color: #666666;
	padding-right: 2px;
	text-align: center;
	font-size : 12px;
	border-bottom: solid 1px #C3C3C3; /* Do not mark double boder */
	border-left: solid 1px #C3C3C3;
}


/*
 * FF scroll hide last column.
 * prevent this case
 */
td:last-child {
	padding-right: 20px;
}
</style>


</head>

<body>
<div class="tableContainer">
  <table cellspacing="0">
     <thead>
      <tr> 
        <td width="30%">Header cell1</td>
        <td width="30%">Header cell2</td>

        <td width="20%">Header cell3</td>
        <td width="20%">Header cell 4</td>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>

     ...

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

    </tbody>
	<tfoot>
	      <tr> 
	        <td colspan="5">Table footer repeats on print</td>
	      </tr>

    	</tfoot>
  </table>

</div>


</div> 
</body>
</html>

26 comments :: no trackback

Thursday 18 October 2007

Best Practices for web site building

Par Vincent DEMAY, Thursday 18 October 2007 :: YUI

YUI team explains in one of them pages some best practices to build web site. The best practices describes in this page can be applicable to YUI based application but even to web site without YUI.

Thanks to Sylvain to show me this link : http://developer.yahoo.com/performance/rules.html

2 comments :: no trackback

Monday 8 October 2007

How to get GPS coordinates from GoogleMap

Par Vincent DEMAY, Monday 8 October 2007 :: Technologies

  1. Go to google map : http://maps.google.com/maps
  2. Make the search you want
  3. In the url bar, type this snippet : 
    javascript:void(prompt('',gApplication.getMap().getCenter()));


Avtually the previous code snippet will be executed on the googlePage and will poped up a dialog containing the center of the GoogleMap coordinate

3 comments :: no trackback

Wednesday 3 October 2007

"Mac, Only 6,15% of computers of the world" : Are you sure?

Par Vincent DEMAY, Wednesday 3 October 2007 :: Technologies

I'm not ;)

no comment :: no trackback

Tuesday 2 October 2007

Joost 1.0 is now out

Par Vincent DEMAY, Tuesday 2 October 2007 :: Technologies

Joost™ the best of tv and the internet The project I've been working for a year now became public yesterday. Joost 1.0 beta is now out. So you don't need invitation anymore to watch or create your own TV. Just go to the web site (www.joost.com) and download Joost. Joost works on Windows and MacOsX(intel).
Joost contains now more than 15000 shows in more than 250 channels to watch for free.

Let's try Joost and enjoy new TV....

one comment :: no trackback