Cricket1650
New Member
I have a jsfiddle here which is embedded (Please open in IE and in one other Major Browser):http://jsfiddle.net/6rCyH/51/embedded/result/http://jsfiddle.net/6rCyH/51/ (normal fiddle so you can see code)To use fiddle just click on the "Add Question" multiple times and it will append rows in a table below:My problem is the the columns are aligned correct in the major browser of either Safari, Opera, Chrome and Firefox but it is not aligned correctly in IE.Each table cell per column contains the same width but the issue I can see is the scroll bar in IE is a lot further into the table than it is in other browsers. My question is that what is the best way to place the scroll bar next to the table so that it does not cause problems with alignment in other other columns? The table is supposed a scrolling table with fixed headers.Below is the code:HTML:\[code\]<div id="details"> <table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th width="9%" class="qid">Question No</th> <th width="29%" class="question">Question</th> <th width="62%" class="optandans">Option and Answer</th> </tr> </thead> </table> <div id="qandatbl_onthefly_container"> <table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0" width="100%"> <tbody> </tbody> </table> </div> </div>\[/code\]Updated CSS:\[code\]#qandatbl_onthefly_container{ width:100%; overflow:scroll; max-height:600px;}#qandatbl, #qandatbl_onthefly{ border:1px black solid; border-collapse:collapse; table-layout:fixed;}#qandatbl{ width:100%; margin-left:0;}#qandatbl_onthefly{ width:100%;}.qid { /*width:15%;*/ font-weight:bold; border:1px black solid; border-collapse:collapse;}/*.question { width:30%; border:1px black solid; border-collapse:collapse;}*/.question { /*min-width:14%; max-width:14%;*/ max-width:0.1%; border:1px black solid; border-collapse:collapse; line-height: 0;}.noofanswers{ min-width:15%; max-width:15%; /*padding-top:5%; padding-bottom:5%;*/}.optandans{ /*min-width:30%; max-width:30%;*/ border:1px black solid; border-collapse:collapse;}.option{ min-width:100%; max-width:100%; /*padding-top:5%; padding-bottom:5%;*/}.answer { min-width:100%; max-width:100%; /*padding-top:5%; padding-bottom:5%;*/}\[/code\]Jquery:\[code\]function insertQuestion(form){//updated variablesvar $tbody = $('#qandatbl_onthefly > tbody'); var $tr = $("<tr class='optionAndAnswer' align='center'>"); var $td = $("<td class='extratd' width='62%'>"); var $qid = $("<td class='qid' width='9%'></td>").text(qnum); var $question = $("<td class='question' width='29%'></td>");................. function code here.................setWidth();}function setWidth() { var questionCellWidth = $("#qandatbl_onthefly tbody .question").width(); console.log(questionCellWidth); var questionCellHeight = $("#qandatbl_onthefly tbody .question").height(); $(".textAreaQuestion").css({ "width": (questionCellWidth - 6) + "px", "height": (questionCellHeight) + "px" });}$(document).ready(function(){var flag = true; if(flag == true) { var tbl_qanda = $("#qandatbl").width(); $("#qandatbl").css({"width": (tbl_qanda - 16)+ "px"}); } var tbl_qanda_onthefly = $("#qandatbl_onthefly").width(); if(tbl_qanda > tbl_qanda_onthefly) { $("#qandatbl").css({"width": (tbl_qanda_onthefly - 16)+ "px"}); $("#qandatbl_onthefly_container").css({"width": (tbl_qanda_onthefly)+ "px"}); }});\[/code\]