1

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

在此处输入图像描述

问题一：

表格高度为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;
}

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

4

1 回答 1

0

更新

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

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

于 2013-01-20T01:07:19.783 回答