如何创建具有固定标题的滚动表[重复]

Posted 2023-03-06

【中文标题】如何创建具有固定标题的滚动表[重复]

【英文标题】：How to create a scrolling table with fixed headers [duplicate]

【发布时间】：2012-12-08 05:49:57

【问题描述】：

可能重复：html table with fixed headers?

我想知道为这个小提琴创建带有固定标题的滚动表的最佳方法是：http://jsfiddle.net/LKB9e/9/

我不想要单独的表格标题和表格正文，我希望列保持匹配。

有人可以让我的小提琴工作来匹配这个吗？

要使用 fiddle，只需单击演示中的“添加问题”按钮，它会不断将行附加到下表中。

此时表格正在滚动，没有固定的标题，这是通过以下方式完成的：

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

下面是 javascript 代码，它将行追加到上面的 html 表中：

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/

【问题讨论】：

“最好的答案是谁能让我的小提琴奏效。” - 你为我们的工作提供奖励吗？ :-)

@BillyMoat 不，只是我在 SO 中尝试了很多示例，但它们对我的小提琴不起作用，所以我的意思是，如果有人有解决方案并设法让它工作在我的小提琴中，我知道该解决方案适用于我的应用程序，因此我可以标记答案。

@Sharlike 我查看了许多 SO 示例并在我的小提琴中尝试过，但它们并没有完全正常工作。大多数情况下，我遇到的问题是thead 和tbody 之间的列不匹配。这就是为什么如果有人可以让它在我的小提琴中工作，那么我可以看到工作示例

您也应该在问题中发布您的源代码，以便将来删除您的 jsfiddle 链接时可以使用它

@Sharlike 我也会在问题中发布代码:)

【参考方案1】：

以下是一些使用不同方法的示例： jsfiddle.net/FeU3T/2/http://www.imaputz.com/cssStuff/bigFourVersion.htmlhttp://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header

【讨论】：

其实我之前尝试过第一种方法，但是没有成功。如果你能让它在我的小提琴中工作，那么我会标记你的答案，因为就像我之前所说的那样，我已经尝试了几个例子，但它从来没有奏效。如果您可以让它与我的 jsfiddle 中的任何方法一起使用，那么这将解决问题

我需要它在所有 5 种主要浏览器 btw、chrome、firefox 中工作，即 safari 和 opera