php - 表中滚动条的 2 个问题

Question

关于输出如下的表有 2 个问题:

问题一:

表格高度为500px，但我不明白的是，由于滚动条向下移动，看起来不属于表格的内容显示在表格内就像表格行下面的内容在表格中一样。所以我的问题是如何让滚动条仅在满足 500px 时才出现，而不是像现在这样立即显示？如何让内容(选择框、标题等)显示在表格下方，而不是像屏幕截图中那样显示在表格中

问题二:

如何让滚动条在表格的一侧被剪裁？目前它被裁剪在最后一列的下方，这意味着它占用了最后一列的一些空间，因此表格列不匹配的原因。

表格html代码如下:

            <table id="tableqanda" align="center" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th width="30%" class="question">Question</th>
        <th width="8%" class="option">Option Type</th>
        <th width="6%" class="noofanswers">Number of Answers</th>
        <th width="8%" class="answer">Answer</th>
        <th width="6%" class="noofreplies">Number of Replies</th>
        <th width="6%" class="noofmarks">Number of Marks</th>
        <th width="12%" class="images">Images</th>
    </tr>
    </thead>
    </table>
    <div id="tableqanda_onthefly_container">
    <table id="tableqanda_onthefly" align="center" cellpadding="0" cellspacing="0">
    <tbody>
        <?php
          foreach ($arrQuestionContent as $key=>$question) {
        echo '<tr class="tableqandarow">'.PHP_EOL;
        echo '<td width="30%" class="question">'.htmlspecialchars($question).'</td>' . PHP_EOL;
        echo '<td width="8%" class="option">'.htmlspecialchars($arrOptionType[$key]).'</td>' . PHP_EOL;
        echo '<td width="6%" class="noofanswers">'.htmlspecialchars($arrNoofAnswers[$key]).'</td>' . PHP_EOL;
        echo '<td width="8%" class="answers">'.htmlspecialchars($arrAnswer[$key]).'</td>' . PHP_EOL;
        echo '<td width="6%" class="noofreplies">'.htmlspecialchars($arrReplyType[$key]).'</td>' . PHP_EOL; 
        echo '<td width="6%" class="noofmarks">'.htmlspecialchars($arrQuestionMarks[$key]).'</td>' . PHP_EOL; 
        echo '<td width="12%" class="images">'.htmlspecialchars($arrImageFile[$key]).'</td>' . PHP_EOL;
        echo '</tr>'.PHP_EOL;
        }
?>
    </tbody>
    </table>

    <h4>PARTICIPATING STUDENTS</h4>

    <p>
    <strong>Number of Participating Students:</strong> <?php echo $studentnum; ?>
    </p>

    <p>
    <strong>Current Participating Students:</strong>
    <br/>
    <tr>
    <td>
    <select name="students" id="studentslist" size="10">

    <?php
if($studentnum == 0){
    echo "<option disabled='disabled' class='red' value=''>No Students currently in this Assessment</option>"; 
}else{
    while ( $currentstudentstmt->fetch() ) {

    echo "<option disabled='disabled' value='$dbStudentId'>" . $dbStudentAlias . " - " . $dbStudentForename . " " . $dbStudentSurname . "</option>" . PHP_EOL;
}
    }
    ?>
    </select>
    </p>

下面是CSS:

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

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


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

我希望我的表格保持为带有固定标题的滚动表格

Answer 1

更新

对于问题 1，尝试将 overflow-y 属性设置为 auto。这样滚动条只会在表格高度超过 500px 时显示。

所以像这样:

overflow-y:auto;

代替

overflow-y:scroll;

原帖:

要回答您的第二个问题，您可以将表头添加为另一行:

<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" align="center" cellpadding="0" cellspacing="0">
<tr>
    <th width="30%" class="question">Question</th>
    <th width="8%" class="option">Option Type</th>
    <th width="6%" class="noofanswers">Number of Answers</th>
    <th width="8%" class="answer">Answer</th>
    <th width="6%" class="noofreplies">Number of Replies</th>
    <th width="6%" class="noofmarks">Number of Marks</th>
    <th width="12%" class="images">Images</th>
</tr>
    <?php
      foreach ($arrQuestionContent as $key=>$question) {
    echo '<tr class="tableqandarow">'.PHP_EOL;
    echo '<td width="30%" class="question">'.htmlspecialchars($question).'</td>' . PHP_EOL;
    echo '<td width="8%" class="option">'.htmlspecialchars($arrOptionType[$key]).'</td>' . PHP_EOL;
    echo '<td width="6%" class="noofanswers">'.htmlspecialchars($arrNoofAnswers[$key]).'</td>' . PHP_EOL;
    echo '<td width="8%" class="answers">'.htmlspecialchars($arrAnswer[$key]).'</td>' . PHP_EOL;
    echo '<td width="6%" class="noofreplies">'.htmlspecialchars($arrReplyType[$key]).'</td>' . PHP_EOL; 
    echo '<td width="6%" class="noofmarks">'.htmlspecialchars($arrQuestionMarks[$key]).'</td>' . PHP_EOL; 
    echo '<td width="12%" class="images">'.htmlspecialchars($arrImageFile[$key]).'</td>' . PHP_EOL;
    echo '</tr>'.PHP_EOL;
    }
    ?>
</table>
</div>

这样滚动条应该放在最右边，而不是在任何东西下面。以前不是的原因是因为您有两个具有独立宽度的不同表格。