2 issues on scroll bar in table - php

Question

Got 2 questions regarding a table which output is below:
Question 1:
The table height is 500px, yet what I don't understand is that it looks like the content underneath which doesn't belong to the table is displayed within the table because of the scroll bar that goes so that down that it looks like the content underneath the table rows are in the table. So my question is how can I get the scroll bar to appear only if the 500px is met, rather than showing it straight away as it is doing now? How do I get the content (select box, heading, etc) be displayed underneath the table rather than in the table as it is doing in the screenshot
Question 2:
How can I get the scroll bar to be clipped on the side of the table? At the moment it is clipped just underneath the last column meaning it is taking up some of the last column's space and hence why table columns are not matching.
Below is html code of table:
<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>
Below is 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;
}
I want my table to remain as a scrolling table with fixed headers

Answer 1

UPDATE
For question 1, try setting the overflow-y property to auto. This way the scrollbar will only be displayed once the table exceeds 500px in height.
So something like:
overflow-y:auto;
instead of
overflow-y:scroll;
ORIGINAL POST:
To answer your second question, you can just add the heads of the table as another row:
<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>
This way the scroll bar should be put at the very right, not underneath anything. The reason it wasn't before was because you had two different tables with independent widths.