bryantgoat
New Member
I have a table here: TableAs you can see the table row is longer than the table headings. I have got a fixed table headings using one table and just including th tags and then I create a second table for td tags an combine together.My question is how do I get the table heading to be the same width as the table row and then be able to clip the scroll bar on the side next to the table row?Below is html:<table id="qandatbl" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 1205px;"><thead><tr><th width="2%"></th><th class="qid" width="5%">Num</th><th class="question" width="13%">Question</th><th class="optandans" width="16%">Option and Answer</th><th class="noofreplies" width="7%">Number of Replies</th><th class="weight" width="6%">Number of Marks</th><th class="image" width="17%">Image</th><th class="video" width="17%">Video</th><th class="audio" width="17%">Audio</th></tr></thead></table><div id="qandatbl_onthefly_container" style="width: 1221px;"><table id="qandatbl_onthefly" cellspacing="0" cellpadding="0" border="0" align="center"><tbody><tr class="optionAndAnswer" align="center"><td class="plusrow" width="2%">1</td><td class="qid" width="5%">2</td><td class="question" width="13%">3</td><td class="extratd" width="16%">4</td><td class="noofreplies" width="7%">5</td><td class="weight" width="6%">6</td><td class="image" width="17%">7</td><td class="video" width="17%">8</td><td class="audio" width="17%">9</td></tr></tbody></table></div>Below is CSS:#qandatbl_onthefly_container{ width:100%; overflow-y: scroll; overflow-x: hidden; max-height:500px;}#qandatbl_onthefly{ width:100%; clear:both; overflow:auto;}#qandatbl, #qandatbl_onthefly{ border:1px black solid; border-collapse:collapse; table-layout:fixed;} #qandatbl{ width:100%; margin-left:0; clear:both;}#qandatbl td { vertical-align: middle;}#qandatbl th{ border:1px black solid; border-collapse:collapse; text-align:center;}