表格行不匹配表格标题的宽度

Question

我在这里有一张桌子：Table

如您所见，表格行长于表格标题。我有一个固定的表格标题使用一个表格，只包含th个标签，然后我为td标签创建了第二个表格，并将它组合在一起。

我的问题是如何让表格标题与表格行的宽度相同，然后才能剪切表格行旁边的滚动条？

下面是html：

<table id="qandatbl" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 1205px;">
<thead>
<tr>
<th width="2%"></th>
<th class="qid" width="5%">Num</th>
<th class="question" width="13%">Question</th>
<th class="optandans" width="16%">Option and Answer</th>
<th class="noofreplies" width="7%">Number of Replies</th>
<th class="weight" width="6%">Number of Marks</th>
<th class="image" width="17%">Image</th>
<th class="video" width="17%">Video</th>
<th class="audio" width="17%">Audio</th>
</tr>
</thead>
</table>
<div id="qandatbl_onthefly_container" style="width: 1221px;">
<table id="qandatbl_onthefly" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr class="optionAndAnswer" align="center">
<td class="plusrow" width="2%">1</td>
<td class="qid" width="5%">2</td>
<td class="question" width="13%">3</td>
<td class="extratd" width="16%">4</td>
<td class="noofreplies" width="7%">5</td>
<td class="weight" width="6%">6</td>
<td class="image" width="17%">7</td>
<td class="video" width="17%">8</td>
<td class="audio" width="17%">9</td>
</tr>
</tbody>
</table>
</div>

下面是CSS：

#qandatbl_onthefly_container
{
    width:100%;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height:500px;
}

#qandatbl_onthefly
{
    width:100%;
    clear:both;
    overflow:auto;
}

#qandatbl, #qandatbl_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
}       

#qandatbl{
    width:100%;
    margin-left:0;
    clear:both;
}

#qandatbl td { 
    vertical-align: middle;
}

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

更新

#qandatbl_onthefly_container
{
    overflow-y: scroll;
    overflow-x: hidden;
    max-height:500px;
}

#qandatbl_onthefly
{
    clear:both;
    overflow:auto;
}

#qandatbl, #qandatbl_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
    margin-left:0;
    clear:both;
}       



#qandatbl td { 
    vertical-align: middle;
}

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


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

瞬间输出：

Answer 1

你在两个不同的表中。

标题在：

table id="qandatbl" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 1205px;"

身体在：

table id="qandatbl_onthefly" cellspacing="0" cellpadding="0" border="0" align="center"

如果你真的想拥有两个不同的表，你必须在CSS中使用相同的宽度。我建议将你和你的两张桌子放在那里。

thead id="qandatbl"
tbody id="qandatbl_onthefly"

（OT：有人可以告诉我如何在SO格式化HTML标签吗？）