Question

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

enter image description here

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

下面是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>

这样滚动条应该放在最右边，而不是放在任何东西下面。它不是之前的原因是因为你有两个不同宽度的表。

表格中的滚动条有2个问题

1 个答案: