html - 表格行与表格标题的宽度不匹配

Question

我这里有一张 table :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

你在 2 个不同的表中。

标题位于:

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

body 在:

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

如果你真的想要两个不同的表格，你必须在 CSS 中使 th 和 td 具有相同的宽度。我建议将 thead 和 tbody 设置为您当前的两个表。

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

(OT:有人可以告诉我如何在 SO 处格式化 HTML 标签吗？)