Question

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:

<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>

Updated CSS:

#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%;*/
}

Jquery:

function insertQuestion(form)
{
//updated variables

var $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"});
    }
});

Answer 1

You need to make some change on css

i. In #qandatbl add float:left;

ii. In #qandatbl_onthefly_container add clear:both

iii. In .question textarea and #qandatbl_onthefly_container add overflow:auto

Third one is not related to your issue but without that scroll on textarea is not looking good on ie.