html - 文本与下一个表格列重叠

Question

我有一个下表：

    <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;
}

Answer 1

几点建议： 1. 不要试图将表头和明细行放在两个不同的表中。我知道这不是你问的问题，而是一个建议。2. 您想更改表格的 CSS，使其不是固定布局。

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

您的数据大于分配的空间。您还可以使用 wrap 将文本换行以确保它不会超出布局。