0

以下の表があります。

    <table id="tableqanda" align="center" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th width="6%" class="noofanswers">Number of Answers</th>
        <th width="5%" class="answer">Answer</th>
        <th width="6%" class="noofreplies">Number of Replies</th>
    </tr>
    </thead>
    </table>
    <div id="tableqanda_onthefly_container">
    <table id="tableqanda_onthefly" align="center" cellpadding="0" cellspacing="0">
    <tbody>
        <?php
          foreach ($arrQuestionId as $key=>$question) {
        echo '<tr class="tableqandarow">'.PHP_EOL;
        echo '<td width="6%" class="noofanswers">'.htmlspecialchars($arrNoofAnswers[$key]).'</td>' . PHP_EOL;
        echo '<td width="5%" class="answers">'.htmlspecialchars($arrAnswer[$key]).'</td>' . PHP_EOL;
        echo '<td width="6%" class="noofreplies">'.htmlspecialchars($arrReplyType[$key]).'</td>' . PHP_EOL; 
        echo '</tr>'.PHP_EOL;
        }
?>
    </tbody>
    </table>
    </div>

テーブルは、ヘッダーが固定されたスクロールテーブルです。しかし、これは問題ではありません。私が抱えている問題は回答列にあります。下のスクリーンショットを見ると、列の下の最初の行でAnswer、回答がその下の残りのコンテンツを表示するのではなく、その隣の列と重なっていることがわかります。なぜこうなった？

以下はスクリーンショットです：

ここに画像の説明を入力してください

以下はCSSです。

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

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

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

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

#tableqanda{
    width:100%;
    margin-left:0;
    float:left;
}

#tableqanda td { 
    vertical-align: middle;
    border:1px black solid;
    border-collapse:collapse;
}

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

.tableqandarow{
    border:1px black solid;
    border-collapse:collapse;
}
4

1 に答える 1

1

いくつかの提案：1。テーブルヘッダーと詳細行を2つの異なるテーブルに配置しようとしないでください。それはあなたが尋ねたものではなく、提案だと私は知っています。2.テーブルのCSSを変更して、レイアウトが修正されないようにします。

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

データが割り当てられたスペースよりも大きいです。wrapを使用してテキストを折り返し、レイアウトから外れないようにすることもできます。

于 2013-01-22T00:46:40.290 に答える