View original (French)

Freeze the first row of an HTML table

willy -  
bixente2 Posted messages 3 Status Member -
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 answers

  1. 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
    1. eyams
       
      I am interested in the pure HTML/CSS solution. Is it available somewhere?
      Thank you.
      0
  2. slolo2000 Posted messages 315 Status Member 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
  3. bixente2 Posted messages 3 Status Member 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
  4. 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
  6. 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
  8. Gihef Posted messages 5165 Status Contributor 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