CODEWITHSUNDEEP
jquerycss
Phillip Senn
Phillip Senn

Reputation: 47663

Scrollable table

In 2005, Stu Nichols posted this entry about have a fixed header with scrolling rows in a table.

Is there a more updated solution to this task, or is what Stu wrote in 2005 still considered the latest?

Upvotes: 1

Views: 726

Answers (5)

Carlos H
Carlos H

Reputation: 584

I have a good solution! Try this, see if you can understand... It's all about css display...

<html>
    <head>
        <meta charset="UTF-8">
        <title>Ex Scrollable Table</title>
        <style type="text/css">

            .divScroll
            {
                display:block; 
                overflow-x: hidden; 
                overflow-y: scroll; 
                -ms-overflow-x: hidden; 
                -ms-overflow-y: scroll; 
                height: 70px;
            }            

            .Header
            {
                display:table-header-group;
            }


            .HeaderCell
            {
                text-align: left;
                display: table-cell;
            }

            .FooterCell
            {
                display: table-cell;
                text-align: left;
            }

            .Row
            {
                display:table-row;                
            }


            .Cell
            {
                display: table-cell;
            }

            .Footer
            {
                display: table-footer-group;
            }

        </style>

    </head>
    <body>
        <table>            
            <thead>
                <tr>
                    <th class="Header">
                        <div class="Row">
                            <div class="HeaderCell" style="width:140px;">Column1</div>
                            <div class="HeaderCell" style="width:90px;">Column2 </div>
                            <div class="HeaderCell" style="width:190px;">Column3</div>
                            <div class="HeaderCell" style="width:100px;">Column4</div>
                        </div>
                    </th>
                </tr> 
            </thead>
            <tbody>
                <tr>
                    <td class="divScroll">

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>


                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>


                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>


                    </td>

                </tr>                
            </tbody>
            <tfoot>
                <tr>
                    <th class="Footer">
                        <div class="Row">
                            <div class="FooterCell"  style="width:140px;">A</div>
                            <div class="FooterCell"  style="width:90px;"> B</div>
                            <div class="FooterCell"  style="width:190px;">C</div>
                            <div class="FooterCell"  style="width:100px;">D</div>
                        </div>
                    </th>                    
                </tr>
            </tfoot>    
        </table>        



    </body>
</html>

Upvotes: 1

Andreas
Andreas

Reputation: 71

I don't know about you but I need tables which can handle dynamic width (and height). Firefox (<= 3.6) is able to handle this very well and none of the suggested frameworks seem to deal with that in a clean way. Too bad Firefox 3.7 is removing this feature as they call it a bug:

https://bugzilla.mozilla.org/show_bug.cgi?id=552080

Feel free to vote on this issue and have the Firefox guys rethink their descition.

Upvotes: 1

g.d.d.c
g.d.d.c

Reputation: 48038

That's as current as exists AFAIK. Depending on which browsers you need to support you can use CSS to attach an overflow: scroll to the tbody element, but it's not officially in the CSS spec and only works semi-reliably. Firefox seems to understand it, and I believe Chrome will as well, but IE ignores it enitrely.

Upvotes: 1

Ehsan
Ehsan

Reputation: 1959

If you are using jQuery there is a good plugin to do this. you can find it here

Upvotes: 1

John Hartsock
John Hartsock

Reputation: 86902

The second way is kinda how JQGrid handles its scrollable tables. Have a look at thier demos here. And perhaps instead of recreating the wheel you would like to use thier TableToGrid Method. This will take a html table and turn it into thier formatted grid.

Upvotes: 1

Related Questions