列THEAD和TBODY

Question

我這裏有一個應用程序之間的不匹配：Application

在應用程序，請執行以下操作：

1. 你會看到左手邊一個綠色的加號按鈕，點擊它會打開一個模式窗口。

2. 在模態窗口的搜索欄中鍵入短語single並提交搜索。一張表格將在下面顯示。

3. 通過點擊「添加」按鈕從表中添加一行，它會將信息添加到頂部控件中。

4. 最後點擊「添加問題」按鈕，這將在下面附加一個表格行。

現在我的問題是，在<tbody>在<thead>列，列不匹配。我的問題是如何讓這些列匹配？

HTML代碼是下面示出在所附行：

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

下面是HTML表，其中它包含表標題列，並且其中所述表中的行追加到：

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

最後下面是CSS代碼：

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

我已經包括了一個jsfiddle，所以你可以看看de它Mo和測試任何想法，你有：http://jsfiddle.net/heA2b/1/

Answer 1

第一個答案（user1721135）不正確，那是因爲你已經分配了THEAD和TBODY「塊」的顯示。刪除它，你的問題就會消失。

他是正確的，你不必分配混合和最大寬度，如果他們是相同的，但這不是什麼導致你的問題。

編輯補充工作示例：http://codepen.io/joe/pen/gqzbf