1

出力が以下のテーブルに関する 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>

以下は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;

元の投稿:

2 番目の質問に答えるには、テーブルの見出しを別の行として追加するだけです。

<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 つの異なるテーブルがあったためです。

于 2013-01-20T01:07:19.783 に答える