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?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:\[code\] <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>\[/code\]Below is CSS:\[code\]#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;}\[/code\]I want my table to remain as a scrolling table with fixed headers