Columns in table not aligning in application

[Scribby]

I am having trouble align the columns in my table with their table headings, the strange thing that is aligns in the Jsfiddle here with no problems: http://jsfiddle.net/m4HB3/68/But in my application with the exact same code, it does no align the columns correctly with their headings: applicationMy question is what do I need to include in the application in order to fix this alignment issue in the application?Below is code:HTML:<table id="tableqanda" cellpadding="0" cellspacing="0"> <thead> <tr> <th width="5%" class="questionno">Question No</th> <th width="23%" class="question">Question</th> <th width="7%" class="option">Option Type</th> <th width="6%" class="noofanswers">Number of Answers</th> <th width="7%" class="answer">Answer</th> <th width="6%" class="noofreplies">Number of Replies</th> <th width="6%" class="noofmarks">Number of Marks</th> <th width="11%" class="image">Image</th> <th width="11%" class="video">Video</th> <th width="11%" class="audio">Audio</th> </tr> </thead> </table> <div id="tableqanda_onthefly_container"> <table id="tableqanda_onthefly" cellpadding="0" cellspacing="0"> <tbody> <tr class="tableqandarow"> <td width="5%" class="questionno">Question No.</td> <td width="23%" class="question">Question</td> <td width="7%" class="option">Option</td> <td width="6%" class="noofanswers">Number of Answers</td> <td width="7%" class="answer">Answer</td> <td width="6%" class="noofreplies">Number of Replies</td> <td width="6%" class="noofmarks">Number of Marks</td> <td width="11%" class="image"><ul><li>Image</li></ul></td> <td width="11%" class="video"><ul><li>Video</li></ul></td> <td width="11%" class="audio"><ul><li>Audio</li></ul></td></tr> </tbody> </table> </div>CSS:#tableqanda_onthefly_container{ max-height: 25px; width: 100%; overflow-y: scroll;}#tableqanda_onthefly{ width:100%; clear:both; table-layout: fixed;}#tableqanda_onthefly td{ border:1px black solid; border-collapse:collapse;}#tableqanda, #tableqanda_onthefly{ border:1px black solid; border-collapse:collapse; word-wrap:break-word;} #tableqanda{ width:97%; margin-left:0; table-layout: fixed; 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;}.imagetd{ font-size:75%; }.audiotd{ font-size:75%; }.videotd{ font-size:75%; }.qandaul{ list-style-type:square;}ul, ul li { margin: 0; padding: 0; }ul { margin-left: 1.3em; }