0

ここにテーブルがあります:テーブル

ご覧のとおり、表の行は表の見出しよりも長くなっています。1 つのテーブルを使用し、タグだけを含む固定テーブルの見出しを取得してから、タグを結合するthための 2 つ目のテーブルを作成します。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"

本当に 2 つの異なるテーブルが必要な場合は、CSS で th と td を同じ幅にする必要があります。thead と tbody を、現在の 2 つのテーブルに合わせることをお勧めします。

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

(OT: SO で HTML タグをフォーマットする方法を誰か教えてくれませんか?)

于 2013-01-29T07:48:51.923 に答える