Php 表中滚动条上的2个问题

关于输出如下的表格，有两个问题：

问题1：

表的高度是500px，但我不明白的是，它看起来像下面不属于表的内容显示在表中，因为滚动条向下移动，看起来表行下面的内容在表中。因此，我的问题是，如何才能让滚动条仅在满足500px的条件下显示，而不是像现在这样直接显示？如何使内容（选择框、标题等）显示在表格下方，而不是屏幕截图中的表格中

问题2：

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

以下是表格的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>

---

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

更新

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

比如：

overflow-y：自动

而不是

overflow-y：滚动

原创帖子：

要回答第二个问题，只需将表格的标题添加为另一行：

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


问题:
选项类型
答案数目
答复
答复数
分数
图像

这样滚动条应该放在最右边，而不是放在任何东西下面。以前没有这样做的原因是因为您有两个不同的表，它们具有独立的宽度。
我之所以像以前那样设置表，是因为我想要一个具有固定标题的滚动表。如果我将表格更改为您提到的内容，那么我无法获得滚动表格的固定标题，因此我无法使用此功能。我的错，我应该提到，我想要一个固定的标题滚动表更新问题1的答案。
<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>