I have a table below:\[code\] <table id="tableqanda" align="center" cellpadding="0" cellspacing="0"> <thead> <tr> <th width="6%" class="noofanswers">Number of Answers</th> <th width="5%" class="answer">Answer</th> <th width="6%" class="noofreplies">Number of Replies</th> </tr> </thead> </table> <div id="tableqanda_onthefly_container"> <table id="tableqanda_onthefly" align="center" cellpadding="0" cellspacing="0"> <tbody> <?php foreach ($arrQuestionId as $key=>$question) { echo '<tr class="tableqandarow">'.PHP_EOL; echo '<td width="6%" class="noofanswers">'.htmlspecialchars($arrNoofAnswers[$key]).'</td>' . PHP_EOL; echo '<td width="5%" class="answers">'.htmlspecialchars($arrAnswer[$key]).'</td>' . PHP_EOL; echo '<td width="6%" class="noofreplies">'.htmlspecialchars($arrReplyType[$key]).'</td>' . PHP_EOL; echo '</tr>'.PHP_EOL; }?> </tbody> </table> </div>\[/code\]The table is a scrolling table with fixed headers. But this is not the issue. The issue I have is with the answer column, If you look at the screen shot below, you can see for the first row under the \[code\]Answer\[/code\] column, the answers are overlapping the column next to it, rather than displaying the rest of the content underneath. Why is this happening?Below is screenshot:
Below is the CSS:\[code\]#tableqanda_onthefly_container{ width:100%; overflow-y: auto; overflow-x: hidden; max-height:500px;}#tableqanda_onthefly{ width:100%; overflow:auto; clear:both;}#tableqanda_onthefly td{ border:1px black solid; border-collapse:collapse;}#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;}.tableqandarow{ border:1px black solid; border-collapse:collapse;}\[/code\]