View original (French)

Freeze the first row of an HTML table

willy -  
bixente2 Posted messages 3 Status Membre -
Hey guys!
I would like to display my web pages in a table. The problem is that when the table is too large, it causes vertical scrolling. My issue is that when I go to the end of the table, I lose the header. Is it possible to freeze one or a few rows of the table (the header)?

P.S.: The site is built www.wassi.ci/ and telling me to use frames instead of the table doesn't appeal to me for technical reasons.

7 réponses

Réponse 1 / 7
Napjea
 
If you want to do it in pure HTML and CSS, I did it not long ago if you want ==> operational on Mozilla and the annoying IE.
There's also some script to color every other line for better visibility...
There you go, kisses.
6
eyams
 
I am interested in the pure HTML/CSS solution. Is it available somewhere?
Thank you.
0
Réponse 2 / 7
slolo2000 Posted messages 315 Status Membre 48
 
I did something that should be able to help you, but it's not necessarily the best solution (it's just the only one I found)

- You create a table for the header of your table, specifying the column widths (this is important)
- You create another table (with the same column widths) that you wrap in a div with the following style:
.divForLook
{
overflow: scroll;
width:100%;
height:400;
}

That way, you have a table that always has the same size, in which you scroll the content (thanks to the div)

Am I clear?

See you!
4
Réponse 3 / 7
bixente2 Posted messages 3 Status Membre 3
 
Hi Bill17

Indeed I messed up, damn. For it to work, you have to specify the <tbody> as "block" in the CSS style. Don’t forget to also specify the height as I indicated.
You need to properly frame the dimensions of your <thead> and <tbody> so that the columns can align well, along with other CSS styles for the layout.
It gives: 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style> .ta_classe { overflow: auto; display: block; height: 100px; width: 500px; } .cl2 { height: 20px; width: 500px; display: block; } td { width: 100px; } </style> </HEAD> <BODY> <table> <thead class="cl2"> <tr><td>ent 1</td> <td>ent 2</td> <td>ent 3</td> <td>ent 4</td> <td>ent 5</td></tr> </thead> <tbody class="ta_classe"> <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> ...repeat 200 times <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> <tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr> </tbody> </table> </BODY> </HTML>
3
Réponse 4 / 7
Bixente
 
Hello everyone,
I know I'm a few years late to the party, but this might help those who, like me, are also looking for a solution (03/10/2011).
Fixing the column headers and scrolling the body of the table is child's play, in pure and hard html/css:
1/ Wrap the column headers in <thead></thead>
2/ Wrap the rest of the table in <tbody></tbody>
Assign a CSS class to <tbody>:
.ta_classe
{
height: 300px;
overflow: auto;
}
And there you go, it can't be any simpler :)
See you later!
2
Réponse 5 / 7
bill17
 
Hello, Bixente

I tried what you said, but it doesn't work at all. Maybe something is missing in your explanation. Here is my little piece of code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <style> .ta_classe { overflow: auto; } </style> </HEAD>
<BODY>
<table>
<thead> <tr> <td>entry 1</td> <td>entry 2</td> <td>entry 3</td> <td>entry 4</td> <td>entry 5</td> </tr> </thead>

<tbody class="ta_classe">
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr>
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr>
...repeat 200 times
<tr> <td>body 1</td> <td>body 2</td> <td>body 3</td> <td>body 4</td> <td>body 5</td> </tr>
</tbody>
</table>
</BODY>

</HTML>
1
Réponse 6 / 7
mital sluqa
 
Hi,
I'm new to the discussion. Can I know where I can find Excel courses?
0
Gihef Posted messages 5165 Status Contributeur 2 781
 
Hello new and welcome,

To do well, you should avoid asking your questions just anywhere.
Instead, use a new message specifically for you in the right forum.
Thank you.

--
0
Réponse 7 / 7
Gihef Posted messages 5165 Status Contributeur 2 781
 
Hello,

First, try to correct the errors on your page.
For example :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>GROUPE WASSI - </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="keywords" content="Technologies,Web Consulting, Micro-informatique,Kendrydh,Maintenance et réseau ,Développement Web ,Formation,côte d'Ivoire,Omaurier,Conseils et Ingénieurie"> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <!--Performed by RZA : Rozel Audric KOUADIO : http://www.divinetwork.com--> <link href="css/omi_style.css" rel="stylesheet" type="text/css"> </head> <body topmargin="0" bottommargin="0">   code  code  code  code  code  code  code  code <td height="18" valign="top"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Document sans nom</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css/omi_style.css" rel="stylesheet" type="text/css"> <!--Performed by RZA : Rozel Audric KOUADIO : http://www.divinetwork.com--> </head> <body>


Then, which table are you talking about ?
There are 16.

--
0