Question

I am creating a scrolling table with fixed headers which works perfectly except for one slight issue. The columns do not align with their headers in IE, but they do align properly in the other major browsers (Chrome, firefox, opera, safari)

My question is what do I need to add or maybe even remove so I can the get the alignment sorted in IE?

Below is a screen grab showing what it looks like:

Below is HTML and CSS regarding of table above with their dummy data:

HTML:

    <table id="tableqanda" align="center" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th width="5%" class="questionno">Question No.</th>
        <th width="29%" class="question">Question</th>
        <th width="7%" class="option">Option Type</th>
        <th width="6%" class="noofanswers">Number of Answers</th>
        <th width="8%" 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" align="center" cellpadding="0" cellspacing="0">
    <tbody>
        <tr class="tableqandarow">
<td width="5%" class="questionno">1</td>
<td width="29%" class="question">What is 4+4</td>
<td width="7%" class="option">A-E</td>
<td width="6%" class="noofanswers">1</td>
<td width="8%" class="answers">B</td>
<td width="6%" class="noofreplies">Multiple</td>
<td width="6%" class="noofmarks">5</td>
<td width="11%" class="imagetd">&nbsp;</td>
<td width="11%" class="videotd">&nbsp;</td>
<td width="11%" class="audiotd">&nbsp;</td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="29%" class="question">Name these 2 things</td>
<td width="7%" class="option">A-D</td>
<td width="6%" class="noofanswers">2</td>
<td width="8%" class="answers">A,C</td>
<td width="6%" class="noofreplies">Multiple</td>
<td width="6%" class="noofmarks">5</td>
<td width="11%" class="imagetd">&nbsp;</td>
<td width="11%" class="videotd">&nbsp;</td>
<td width="11%" class="audiotd">&nbsp;</td>
</tr>
    </tbody>
    </table>
    </div>

CSS:

#tableqanda_onthefly_container
{
    width:100%;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height:500px;
    clear:both;
}

#tableqanda_onthefly
{
    width:100%;
    clear:both;
    overflow:auto;
}

#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;
}
     
#tableqanda th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}


#tableqanda_onthefly td{
    border:1px black solid;
    border-collapse:collapse;
    word-wrap:break-word;
}

.tableqandarow{
    border:1px black solid;
    border-collapse:collapse;
}

I also have a jQuery code which sets a width of a scroll abr but do not know if this makes a difference:

$(document).ready(function(){
    var flag = true;
    
    if(flag == true)
    {
        var qanda_tbl = $("#tableqanda").width();
        $("#tableqanda").css({"width": (qanda_tbl - 16)+ "px"});
    }
    
    var qanda_tbl_onthefly = $("#tableqanda_onthefly").width();
    
    if(qanda_tbl > qanda_tbl_onthefly)
    {
         $("#tableqanda").css({"width": (qanda_tbl_onthefly - 16)+ "px"});
         $("#tableqanda_onthefly_container").css({"width": (qanda_tbl_onthefly)+ "px"});
    }
    });

UPDATE:

I forgot to include a Jfiddle, Here is a jsfiddle which as you can see it aligns the columns correctly with the current code. But there must be something missing in ie in order for it to do this in ie: http://jsfiddle.net/q5ukD/1/

Answer 1

how about removing width:100% on #tableqanda_onthefly