17 Replies Latest reply on Jun 24, 2008 8:32 AM by Karlhevera

    Freeze table header

    Karlhevera Level 1
      Some of my tables are long and have to be scrolled down. Where can I find code which will freeze the table header whilst the table is scrolled up/down, please?

      karl,London,Uk
        • 1. Re: Freeze table header
          Level 7
          Karlhevera wrote:
          > Some of my tables are long and have to be scrolled down. Where can I find code which will freeze the table header whilst the table is scrolled up/down, please?
          >
          > karl,London,Uk


          Hi,

          http://www.dreamweaverresources.com/tutorials/index.htm

          HTH

          --
          chin chin
          Sinclair
          • 2. Re: Freeze table header
            Level 7
            .oO(Karlhevera)

            >Some of my tables are long and have to be scrolled down. Where can I
            >find code which will freeze the table header whilst the table is
            >scrolled up/down, please?

            In theory it's quite simple: Wrap your table headers in a 'thead'
            element, the data rows in one or more 'tbody' elements. With some CSS
            you could then make the data part scroll.

            So much for the theory. In practice you can almost forget it because of
            lacking browser support. Even in many modern browsers this doesn't work
            well enough. You'd have to test it.

            Here's something to play with, try it with Firefox:


            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            " http://www.w3.org/TR/html4/strict.dtd">
            <title>Scrolling Table</title>
            <style type="text/css">
            table {border: 1px solid #000}
            tbody {overflow: scroll; height: 400px}
            td {width: 200px}
            </style>

            <table>
            <thead>
            <tr><th>foo</th><th>bar</th></tr>
            </thead>
            <tfoot>
            <tr><th>foo</th><th>bar</th></tr>
            </tfoot>
            <tbody>
            <tr><td>01</td><td>01</td></tr>
            <tr><td>02</td><td>02</td></tr>
            <tr><td>03</td><td>03</td></tr>
            <!-- add some more content rows -->
            <tr><td>38</td><td>38</td></tr>
            <tr><td>39</td><td>39</td></tr>
            <tr><td>40</td><td>40</td></tr>
            </tbody>
            </table>


            Micha
            • 3. Re: Freeze table header
              Level 7
              Sure looks poopy in IE7.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "Michael Fesser" <netizen@gmx.de> wrote in message
              news:hc65545cd5ras6bt1o566ftncubc4u11dc@4ax.com...
              > .oO(Karlhevera)
              >
              >>Some of my tables are long and have to be scrolled down. Where can I
              >>find code which will freeze the table header whilst the table is
              >>scrolled up/down, please?
              >
              > In theory it's quite simple: Wrap your table headers in a 'thead'
              > element, the data rows in one or more 'tbody' elements. With some CSS
              > you could then make the data part scroll.
              >
              > So much for the theory. In practice you can almost forget it because of
              > lacking browser support. Even in many modern browsers this doesn't work
              > well enough. You'd have to test it.
              >
              > Here's something to play with, try it with Firefox:
              >
              >
              > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              > " http://www.w3.org/TR/html4/strict.dtd">
              > <title>Scrolling Table</title>
              > <style type="text/css">
              > table {border: 1px solid #000}
              > tbody {overflow: scroll; height: 400px}
              > td {width: 200px}
              > </style>
              >
              > <table>
              > <thead>
              > <tr><th>foo</th><th>bar</th></tr>
              > </thead>
              > <tfoot>
              > <tr><th>foo</th><th>bar</th></tr>
              > </tfoot>
              > <tbody>
              > <tr><td>01</td><td>01</td></tr>
              > <tr><td>02</td><td>02</td></tr>
              > <tr><td>03</td><td>03</td></tr>
              > <!-- add some more content rows -->
              > <tr><td>38</td><td>38</td></tr>
              > <tr><td>39</td><td>39</td></tr>
              > <tr><td>40</td><td>40</td></tr>
              > </tbody>
              > </table>
              >
              >
              > Micha

              • 4. Re: Freeze table header
                Level 7
                .oO(Murray *ACE*)

                >Sure looks poopy in IE7.

                I guess as impressive as in IE 6 ... ;)

                A conditional comment might help, so that IE will get the normal non-
                scrolling table. But the entire approach is rather unreliable, as said.

                Micha
                • 5. Re: Freeze table header
                  Karlhevera Level 1
                  djinn: sorry, but could not find anything at the link?
                  • 6. Re: Freeze table header
                    Karlhevera Level 1
                    Murray *ACE* - does not look too promising :-(.. A thought: could I create the header as a separate 1 row table in a layer, which will be above the actual table. In scrolling, the actual table will scroll, whilst the separate header should remain static? Just a wild thought, will try it and report back...
                    • 7. Re: Freeze table header
                      Level 7
                      Nasty option. I wouldn't do it.

                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      ==================


                      "Karlhevera" <webforumsuser@macromedia.com> wrote in message
                      news:g2uaml$kp1$1@forums.macromedia.com...
                      > Murray *ACE* - does not look too promising :-(.. A thought: could I
                      > create the
                      > header as a separate 1 row table in a layer, which will be above the
                      > actual
                      > table. In scrolling, the actual table will scroll, whilst the separate
                      > header
                      > should remain static? Just a wild thought, will try it and report back...
                      >

                      • 8. Re: Freeze table header
                        Level 7
                        Karlhevera wrote:
                        > djinn: sorry, but could not find anything at the link?

                        http://www.dreamweaverresources.com/tutorials/scroller.html

                        --
                        chin chin
                        Sinclair
                        • 9. Re: Freeze table header
                          Karlhevera Level 1
                          Murray: if it is a 'nasty option', what would you suggest to achieve the same result?. I have done it and it seems to be OK... at http://www.gardensoflondon.co.uk/events_organisations.htm
                          • 10. Re: Freeze table header
                            Level 7
                            Resize your text.

                            --
                            Murray --- ICQ 71997575
                            Adobe Community Expert
                            (If you *MUST* email me, don't LAUGH when you do so!)
                            ==================
                            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                            ==================


                            "Karlhevera" <webforumsuser@macromedia.com> wrote in message
                            news:g2ufah$ppd$1@forums.macromedia.com...
                            > Murray: if it is a 'nasty option', what would you suggest to achieve the
                            > same result?. I have done it and it seems to be OK... at
                            > http://www.gardensoflondon.co.uk/events_organisations.htm

                            • 11. Re: Freeze table header
                              Karlhevera Level 1
                              So I resized the heading font from 16 to 14px... What is that supposed to do? Is resizing the font your way to achieve what I set out to do...to freeze the heading.

                              I did find an 8 pages of how to achieve the freeze, written by somebody bmerkey@tampabay.rr.com I found it is complicated, that I did not even attempt it...
                              • 12. Re: Freeze table header
                                Level 7
                                Resize IN THE BROWSER, not in the code. And go larger, not smaller.

                                --
                                Murray --- ICQ 71997575
                                Adobe Community Expert
                                (If you *MUST* email me, don't LAUGH when you do so!)
                                ==================
                                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                ==================


                                "Karlhevera" <webforumsuser@macromedia.com> wrote in message
                                news:g2vtqs$ed4$1@forums.macromedia.com...
                                > So I resized the heading font from 16 to 14px... What is that supposed to
                                > do?
                                > Is resizing the font your way to achieve what I set out to do...to freeze
                                > the
                                > heading.
                                >
                                > I did find an 8 pages of how to achieve the freeze, written by somebody
                                > bmerkey@tampabay.rr.com I found it is complicated, that I did not even
                                > attempt
                                > it...
                                >
                                >

                                • 13. Re: Freeze table header
                                  Karlhevera Level 1
                                  Surely, resizing in the BROWER is the users' choice. It's up to them, whether they want the text appear larger or smaller. It may look just fine, if I enlarge it, but would it look OK elsewhere? From what I have seen, some of it does, some does not...
                                  I have resized, sitewide, the topic headings. It looks nicer, but cannot see how this is the solution to freezing the header of a table. The table might appear marginally smaller vertically, but not small enough to remove the scroll...
                                  My solution may not be al that 'elegant', 'poopie' or even 'nasty' to some of you, but it works... I am yet to see an alternative suggestion from anyone here.
                                  Djinn had a suggestion, but cannot see how it would work with a table with many lines. Works fine in a single cell frame....
                                  • 14. Re: Freeze table header
                                    Level 7
                                    > but cannot see how this is the solution to freezing the header of a
                                    > table.

                                    It is not the solution. It is the problem. Resizing text blows your
                                    absolutely positioned table header out of the water (and the rest of the
                                    page, too).

                                    --
                                    Murray --- ICQ 71997575
                                    Adobe Community Expert
                                    (If you *MUST* email me, don't LAUGH when you do so!)
                                    ==================
                                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                    ==================


                                    "Karlhevera" <webforumsuser@macromedia.com> wrote in message
                                    news:g32fi7$5ub$1@forums.macromedia.com...
                                    > Surely, resizing in the BROWER is the users' choice. It's up to them,
                                    > whether
                                    > they want the text appear larger or smaller. It may look just fine, if I
                                    > enlarge it, but would it look OK elsewhere? From what I have seen, some
                                    > of it
                                    > does, some does not...
                                    > I have resized, sitewide, the topic headings. It looks nicer, but cannot
                                    > see
                                    > how this is the solution to freezing the header of a table. The table
                                    > might
                                    > appear marginally smaller vertically, but not small enough to remove the
                                    > scroll...
                                    > My solution may not be al that 'elegant', 'poopie' or even 'nasty' to some
                                    > of
                                    > you, but it works... I am yet to see an alternative suggestion from anyone
                                    > here.
                                    > Djinn had a suggestion, but cannot see how it would work with a table with
                                    > many lines. Works fine in a single cell frame....
                                    >

                                    • 15. Re: Freeze table header
                                      Level 7
                                      Karlhevera wrote:

                                      > Djinn had a suggestion, but cannot see how it would work with a table with
                                      > many lines. Works fine in a single cell frame....
                                      >

                                      Insert your table within the scrolling table cell in the example I
                                      pointed your to - adjust width etc of container (this bit in the example)...

                                      <div style="width: 490px; height: 450px; overflow: auto; padding: 10px;
                                      border: 1px solid black; background-color:#F3F3E9;">

                                      ... to suit your table.

                                      --
                                      chin chin
                                      Sinclair
                                      • 16. Re: Freeze table header
                                        Karlhevera Level 1
                                        been away, hence the delay in replying. Thanks for your comments and will try as djinn said
                                        • 17. Freeze table header
                                          Karlhevera Level 1
                                          Thanks. But you missed the point... In the example you quote, the header table is a SEPARATE image, whereas in my table, it is the FIRST line of the table, suitably changed, hence the scrolling. I could have used a 'Caption' option, but that did not suit me. That's why I did a separate little table, just of the heading, to fit over the main table.
                                          It seems to work fine. Maybe some fine tuning has to be done.. Just to elaborate a bit: in my former incarnation, I was a database programs developer/writer; whenever I had to use a dbview, or such a similar function, I could specify which rows should scroll.. I brought this habit to HTML, where it obviously does not apply... To use a caption or the first row as a title, works fine, as long as the table does not have to scroll...