[英]2 issues on scroll bar in table
關於下表的輸出有2個問題:
問題1:
表格高度為500像素,但我不明白的是,由於滾動條向下移動,因此看起來不像表格內容,下面的內容不屬於表格表格下方的行在表格中。 所以我的問題是,如何才能使滾動條僅在滿足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;
}
我希望我的表保留為帶有固定標題的滾動表
更新
對於問題1,請嘗試將overflow-y屬性設置為auto。 這樣,只有表格高度超過500像素時,滾動條才會顯示。
所以像這樣:
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>
這樣,滾動條應該放在最右邊,而不是任何下面。 之所以沒有,是因為您有兩個具有獨立寬度的不同表。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.