HTML help...

[anuj_web]

Hi...

I am using a html table...added a background image to the "DIV" it is in ....It can be scrolled...but when I scroll I want the heading of the columns to remain at the top everytime..

how can i do this ?
thanks

EDIT :

I found this while googling

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_20445826.html

and that too without CSS

 

[ansultd]

Seems to me like you would need to embed the DIV containing the table into another table, in the second row, and put the column headers into the first row.....

Something like this:

<table width="520" border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div style="background: #efefef;">
<table width="520" border=1>
<tr>
<td width="155"><b>Title 1</b></td>
<td width="155"><b>Title 2</b></td>
<td width="155"><b>Title 3</b></td>
<td width="35">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div style="background: #efefef; height: 150; overflow: auto;">
<table width="500" border=1>
<tr>
<td width="155">Data 1.1</td>
<td width="155">Data 1.2</td>
<td width="155">Data 1.3</td>
<td width="14">&nbsp;</td>
</tr>
<tr>
<td>Data 2.1</td>
<td>Data 2.2</td>
<td>Data 2.3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Data 3.1</td>
<td>Data 3.2</td>
<td>Data 3.3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Data 4.1</td>
<td>Data 4.2</td>
<td>Data 4.3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Data 5.1</td>
<td>Data 5.2</td>
<td>Data 5.3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Data 6.1</td>
<td>Data 6.2</td>
<td>Data 6.3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Data 7.1</td>
<td>Data 7.2</td>
<td>Data 7.3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Data 8.1</td>
<td>Data 8.2</td>
<td>Data 8.3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Data 9.1</td>
<td>Data 9.2</td>
<td>Data 9.3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Data10.1</td>
<td>Data10.2</td>
<td>Data10.3</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Data11.1</td>
<td>Data11.2</td>
<td>Data11.3</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

 

[anuj_web]

The problem with embedding is that the width of columns and other cells wont match..
i tried using two tables

I found this code...seems to be short and simple ...just cant understand....

http://rcs-comp.com/blog/scrolling_table.zip

 

[vTech]

i found this 4 u....
http://www.imaputz.com/cssStuff/bigFourVersion.html

copy the source and edit to your likings...

 

[anuj_web]

I have gone through this already ..the code is very complex for noobies like me....
the link I posted has a very simple code ...and it works as wel...but I cannot understand it and ....use it


I tried all the P&C's by putting lines from that in2 my code...but cant help it

neway thanks for helping and replying...

 

[vTech]

I have gone through this already ..the code is very complex for noobies like me....
the link I posted has a very simple code ...and it works as wel...but I cannot understand it and ....use it


I tried all the P&C's by putting lines from that in2 my code...but cant help it

neway thanks for helping and replying...

let me simplify it for u...it's actually quite easy....
I've uploaded the html and css for you just edit the table to your own preference....

as for the design just edit this part of the css....

/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
	color: #FFF;
	display: block;
	text-decoration: none;
	width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
	color: #FFF;
	display: block;
	text-decoration: underline;
	width: 100%
}