如何使表与固定标题可滚动 [英] how to make table scrollable with fixed headings

问题描述

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

Does anyone know how to make the table below scrollable as well as being able to keep the table heading fixed so it doesn't scroll down with the table?

下面是html和jquery

Below is html and 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);

    }

推荐答案

小提琴

http://jsfiddle.net/TGBym/

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

Make appropriate changes as per your requirements

这篇关于如何使表与固定标题可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！