Center fixed Table criteria

[stew]

hi, Need help with a simple problem! (see image) which has the following criteria:

1) table centred at middle point not left side (as resizing viewport effects it)
2) table fixed to top viewport (scroll below with table fixed to top in viewport always)
3) and needs z-index function

It may sound simple but I'm being googled it for days now and looked over many forums. Code can be in html css or js, but please post a full working example as I'm new to coding. Thanks

http://i45.tinypic.com/35lvou9.jpg

[jscheuer1]

There is no z-index function, z-index is a style property. I'm assuming you mean that this table must cover anything that's scrolled under it. It will as long as the table is the last element in the page's HTML and there are no other elements on the page with a z-index. If there are, you can just set the table's z-index higher than the highest z-index of the other element(s).

Anyway, put this in a stylesheet for the page (required styles highlighted):


#ctable {
position: fixed;
top: 0;
left: 50%;
border: 1px solid black;
background-color: lightyellow;
z-index: 100000; /* only required if there are one or more other positioned elements on the page with z-index */
}

Put this as the last thing before the closing </body> tag:


<table id="ctable">
<tr>
<td>Centered At Top</td>
</tr>
</table>
<script type="text/javascript">
;(function(){
var ct = document.getElementById('ctable');
function centerit(){
ct.style.marginLeft = '-' + ct.offsetWidth/2 + 'px';
}
centerit();
onload = onresize = centerit;
})();
</script>

You can edit the content of the table, add rows or cells, etc.

Demo:

http://home.comcast.net/~jscheuer1/side/center_table.htm

[stew]

thanks jscheuer1,
your code works:eek: thankyou for speading the time to help me and others on this forum. I take it that you had to use script as there was no other way to do it in html or css... thanks again stew

PS I left a post on the iframe thread

[jscheuer1]

If you're willing to set the width of the table, you can do it with css alone.

Revised css:


#ctable {
position: fixed;
top: 0;
left: 50%;
width: 110px;
margin-left: -56px; /* half the width + left padding and left border width, if either, expressed as a negative */
border: 1px solid black;
background-color: lightyellow;
z-index: 100000; /* only required if there are one or more other positioned elements on the page with z-index */
}

Of course this means you have to know what width to use. If the content of the table doesn't fit the width you set, it can look odd. Better to overestimate than underestimate. You can perhaps center the content in the cells to compensate for a too wide table. That would depend on if that looks OK or not with your content. Browsers may vary by a few pixels as to how much width they need. In those cases use the higher value for all. If you have no control over the content (if it can vary without your knowledge), this method will not work.

If you can do the css like that, you don't need the script. The table should still be the last thing before the closing </body> tag in the HTML code.

[stew]

code works perfectly thanks again jscheuer1:)