PDA

View Full Version : Table...How do you freeze the top 2 rows

acrokos
08-15-2002, 05:57 AM
Hi! Table...How do you freeze the top 2 rows while scrolling down a large table? Can it be done?

sample html table enclosed....

<html>
<head>
<title>TABLE TITLE</title>
</head>
<body>

<table border=1 cellspacing=0 bordercolor=#FFFFFF>
<tr>
<td align="center" colspan="5" bgcolor="#000000"><b><font color="#FFFFFF">TABLE TITLE</font></b></td>
</tr>
<tr align="center" bgcolor="#000000">
<td><b><font color="#FFFFFF"> FIELD TITLE.1 </font></b></td>
<td><b><font color="#FFFFFF"> FIELD TITLE.2 </font></b></td>
<td><b><font color="#FFFFFF"> FIELD TITLE.3 </font></b></td>
<td><b><font color="#FFFFFF"> FIELD TITLE.4 </font></b></td>
<td><b><font color="#FFFFFF"> FIELD TITLE.5 </font></b></td>
</tr>
<tr bgcolor="#C0C0C0" align="center">
<td >A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
</tr>
<tr align="center">
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
<td>E2</td>
</tr>
<tr bgcolor="#C0C0C0" align="center">
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
</tr>
<tr align="center">
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
</tr>
<tr bgcolor="#C0C0C0" align="center">
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
<td>E5</td>
</tr>
<tr>
<td align="center" colspan="5" bgcolor="#000000"><b><font color="#FFFFFF">TABLE SOURCE</font></b></td>
</tr>
</table>

</body>
</html>
beetle
08-15-2002, 08:41 AM
You will certainly have to use 2 separate tables to accomplish this. Stack a table that has your 2 fixed rows on top of an Iframe or a div (with scrolling)
Vladdy
08-15-2002, 01:05 PM
First of all you stop cross-posting.

Second, you put your first two rows in <thead> and set <tbody> style to
overflow: auto;
height: NNpx;

Third, test it with Gekko browser to make sure you got the styles right, then see if IE will swallow it....
acrokos
08-15-2002, 06:28 PM
can you post an exmple?
acrokos
08-15-2002, 07:46 PM
I just cant get it to work...an example definitely needed!
Vladdy
08-15-2002, 08:08 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>TABLE TITLE</title>
</head>
<body>

<table border=1 cellspacing=0 bordercolor=#FFFFFF>
<thead>
<tr>
<td align="center" colspan="5" bgcolor="#000000"><b><font

color="#FFFFFF">TABLE TITLE</font></b></td>
</tr>
<tr align="center" bgcolor="#000000">
<td><b><font color="#FFFFFF"> FIELD TITLE.1 </font></b></td>
<td><b><font color="#FFFFFF"> FIELD TITLE.2 </font></b></td>
<td><b><font color="#FFFFFF"> FIELD TITLE.3 </font></b></td>
<td><b><font color="#FFFFFF"> FIELD TITLE.4 </font></b></td>
<td><b><font color="#FFFFFF"> FIELD TITLE.5 </font></b></td>
</tr>
</thead>
<tbody style="overflow:auto; height:100px;">
<tr bgcolor="#C0C0C0" align="center">
<td >A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
</tr>
<tr align="center">
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
<td>E2</td>
</tr>
<tr bgcolor="#C0C0C0" align="center">
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
</tr>
<tr align="center">
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
</tr>
<tr bgcolor="#C0C0C0" align="center">
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
<td>E5</td>
</tr>
<tr>
<td align="center" colspan="5" bgcolor="#000000"><b><font

color="#FFFFFF">TABLE SOURCE</font></b></td>
</tr>
</tbody>
</table>

</body>
</html>



Try this with a Gekko browser: Moz 1.1 Beta is 5 min to d/l and install.
As far as IE goes... cal 1-800-BILLGATES and ask him why his POS software does not comply with W3C standards when M$ was part of the development group...

Workaround for stoopid IE:
If you can make all your columns of the fixed width - put the top two rows in one table.
<table>
<tr> .. </tr>
<tr> .. </tr>
</table>
put the rest of it in another table that resides within a scrollable div:
<div style="overflow:auto; height:100px;" >
<table>
<tr> .. </tr>
<tr> .. </tr>
</table>
</div>
acrokos
08-15-2002, 08:30 PM
Thanks for your effort...I guess the problem all along has been with M$ IE.