Question

2005年，Stu Nichols发布了this entry关于在表格中滚动行的固定标题。

这个任务是否有更新的解决方案，或者Stu在2005年写的还是最新的？

Answer 1

第二种方式是JQGrid如何处理其可滚动表。看看他们的演示here。也许不是重新创建轮子，而是想使用它们的TableToGrid方法。这将采用一个html表并将其转换为格式化的网格。

Answer 2

如果您使用的是jQuery，那么有一个很好的插件可以做到这一点。你可以找到它here

Answer 3

这与现有的AFAIK一样。根据您需要支持的浏览器，您可以使用CSS将overflow: scroll附加到tbody元素，但它不是CSS规范中的正式版本，只能半可靠地工作。 Firefox似乎理解它，我相信Chrome也会这样，但是IE很无视它。

Answer 4

我不了解你，但我需要能够处理动态宽度（和高度）的表格。 Firefox（＆lt; = 3.6）能够很好地处理这个问题，并且没有一个建议的框架似乎以干净的方式处理它。太糟糕了Firefox 3.7正在删除这个功能，因为他们称之为一个错误：

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

随意投票解决这个问题，并让Firefox人重新考虑他们的想法。

Answer 5

我有一个很好的解决方案！试试看，看看你是否能理解...... 这都是关于css显示...

<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>

可滚动表

5 个答案: