0

重複の可能性:
ヘッダーが固定された HTML テーブル?

ここで、このフィドルのヘッダーが固定されたスクロールテーブルを作成する最良の方法を知りたい: http://jsfiddle.net/LKB9e/9/

テーブル ヘッダーとテーブル ボディを別々にしたくなく、列を一致させたままにしたい。

誰かがこれと一致するように私のフィドルを機能させることができますか?

フィドルを使用するには、デモの [質問を追加] ボタンをクリックするだけで、下のテーブルに行が追加され続けます。

現時点では、これによって行われる固定ヘッダーなしでテーブルがスクロールしています。

#details{
    height:500px;
    overflow:auto;
}

以下はソースコードです。

HTML テーブル:

<table id="questionBtn" align="center">
<tr>
    <th> <input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" /></th>
</tr>
</table>
</div>
<hr/>
<table id="qandatbl" align="center">
<thead class="tblhead">
    <tr>
        <th></th>
        <th class="qid">Question No</th>
        <th class="question">Question</th>
        <th class="optandans">Option and Answer</th>
        <th class="noofreplies">Number of Replies</th>
        <th class="weight">Number of Marks</th>
        <th class="image">Image</th>
        <th class="video">Video</th>
        <th class="audio">Audio</th>
    </tr>
</thead>
<tbody class="tblbody"></tbody>
</table>

以下は、上記の html テーブルに行を追加する JavaScript コードです。

function insertQuestion(form) {   


    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $td = $("<td class='extratd'>");
    var $plusrow = $("<td class='plusrow'></td>");
    var $qid = $("<td class='qid'></td>").text(qnum);
    var $question = $("<td class='question'></td>");
    var $noofanswers = $("<div class='noofanswers'>2. Number of Answers:<br/></div>");
    var $options = $("<div class='option'>1. Option Type:<br/></div>");
    var $answer = $("<div class='answer'>3. Answer:<br/></div>");
    var $replies = $("<td class='noofreplies'><div class='wrapper'></div></td>");
    var $weight = $("<td class='weight'></td>");
    var $image = $("<td class='image'></td>"); 
    var $video = $("<td class='video'></td>");
    var $audio = $("<td class='audio'></td>");


    $tr.append($plusrow);
    $tr.append($qid);
    $tr.append($question);
    $tr.append($td);
    $td.append($options);
    $td.append($noofanswers);
    $td.append($answer);
    $tr.append($replies);
    $tr.append($weight);   
    $tr.append($image);  
    $tr.append($video);
    $tr.append($audio);
    $tbody.append($tr);    


}

以下はcssです：

            /*css for QandATable.php*/
body{
    font-size:85%;    
}            

#qandatbl{
    border:1px black solid;
    border-collapse:collapse;
}

#qandatbl td { 
    vertical-align: middle;
}

#qandatbl th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

.tblhead, .tblbody {
    display: block;
}

.tblbody{
    height: 500px;
    overflow: auto;
    width:100%;    
}

.extratd{
    border:1px black solid;
    border-collapse:collapse;
}

.qid { 
    min-width:3%;
    max-width:3%;
    font-weight:bold;
    border:1px black solid;
    border-collapse:collapse;
}

.question { 
    min-width:25%;
    max-width:25%;
    border:1px black solid;
    border-collapse:collapse;
}

.noofanswers{
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
}

.noofreplies{
    min-width:3%;
    max-width:3%;
    border:1px black solid;
    border-collapse:collapse;
}

.optandans{
    min-width:30%;
    max-width:30%;
    border:1px black solid;
    border-collapse:collapse;
}

.option{
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
}

.weight { 
    min-width:3%;
    max-width:3%;
    border:1px black solid;
    border-collapse:collapse;
    }

.answer { 
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
     }

.audio{
    min-width:11%;
    max-width:11%;
    border:1px black solid;
    border-collapse:collapse;
    }

.video{
    min-width:11%;
    max-width:11%;
    border:1px black solid;
    border-collapse:collapse;
    }

.image{
    min-width:11%;
    max-width:11%;
    border:1px black solid;
    border-collapse:collapse;
    position:relative;
    }

.plusrow{
    min-width:2%;
    max-width:2%;
    border:1px black solid;
    border-collapse:collapse;
    }

アップデート：

ヘッダーが固定されたスクロール テーブルを作成しようとしましたが、列が一致しないという問題があります: http://jsfiddle.net/heA2b/1/

4

1 に答える 1

0

さまざまな方法を使用する例を次に示し
ます
。
固定ヘッダー付き

于 2012-12-21T15:53:35.923 に答える