0

我在这里有一张桌子：桌子

如您所见，表格行比表格标题长。我有一个使用一个表并且只包含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;
}

目前的输出：

在此处输入图像描述

4

1 回答 1

0

您在 2 个不同的表中。

标头位于：

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 中使 th 和 td 的宽度相同。我建议将你的两张桌子目前的样子制作成 thead 和 tbody 。

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

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

于 2013-01-29T07:48:51.923 回答