Question

有没有人知道如何使下面的表格可滚动，并且能够保持表格标题固定，以便它不会向下滚动表格？

下面是html和jquery

 <table id="qandatbl">
        <thead>
        <tr>
            <th class="answer">Answer</th>

        </tr>
        </thead>
        </table>


    function insertQuestion(form) {   


        var $tbody = $("<tbody></tbody>");
        var $tr = $("<tr class='optionAndAnswer'></tr>");
        var $answer = $("<table class='answer'></table>");

    var $this, i=0, $row, $cell;
    $('#optionAndAnswer .answers').each(function() {
        $this = $(this);
        if(i%7 == 0) {
            $row = $("<tr/>").appendTo($answer);
            $cell = $("<td/>").appendTo($row);
        }

        var $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));


        $newBtn.appendTo($cell);

        i++;
    });

        $tbody.append($tr); 
        $tr.append($answer);
        $('#qandatbl').append($tbody);

    }

Answer 1

Chris Coyer有一个关于如何做到这一点的非常好的视频教程。

请在此处查看：http://css-tricks.com/video-screencasts/66-table-styling-2-fixed-header-and-highlighting/

Answer 2

我认为你需要一个Jquery插件;例如：

http://www.datatables.net/index

或

https://github.com/mleibman/SlickGrid

有很多，但我认为这些是最好的

Answer 3

检查这个小提琴

http://jsfiddle.net/TGBym/

根据您的要求进行适当的更改

如何使用固定标题使表格可滚动

3 个答案: