having a table always appear at top of screen

[cliftonbazaar]

I have a page made up of four tables; the first table is the header, always at the top of the screen; the other tables are under the header, one on the left, the center and the right.

 

Is there a way of allowing the header table and two side tables to always be on the screen when the page is scrolled up or down (to move with the page)?

 

James

[haku]

Yes. You can add position:fixed to the CSS for the table. Something like this:

 

#mytable
{
  position:fixed;
  top:0;
}

 

You can see I've done much the same thing here: http://www.jaypan.com/ though I am using a div, not a table. But the principle is the same.

[cliftonbazaar]

Hi Haku and thanks for the answer,

 

I have done what you have said but now I have a problem with the Main table;

css code is

#MainTable
{
  width:70%; margin-left:15%; margin-right:15%;
  vertical-align:center;
  position:fixed;
  top:75px;
  border:3px solid black
}

but this makes it that I can't scroll through this table, if I edit out "position:fixed;" the table then appears under the page heading

 

I only started to learn css about 6 hours so please be gentle with me

 

James

[haku]

Honestly, you are starting to get into intermediate techniques before you've figured out the begginer's ones. As they say, don't try to run before you know how to walk.

 

Spend some more time (and I mean more than 6 hours) learning how CSS works. Do a bunch of tutorials. THEN try to figure out how to do your own techniques. I'd spend another week or so playing with various tutorials first. Come back here then.

 

Also, you need to learn to not use tables (except for tabular data).

[Anti-Moronic]

I'll echo that. Don't use tables for site layout. Modern use for tables is forms and tabular data as Haku said.

 

you might find this excellent tutorial useful:

 

http://www.smashingmagazine.com/2009/10/26/modern-css-layouts-the-essential-characteristics/