Question

我正在创建一个带有固定标题的滚动表，除了一个小问题外，它可以很好地工作。这些列在IE中与它们的标题不对齐，但它们在其他主要浏览器中正确对齐（Chrome，firefox，opera，safari）

我的问题是我需要添加什么甚至删除所以我可以在IE中对齐排序？

下面是一个屏幕抓取，显示它的样子：

enter image description here

下面是关于上表及其虚拟数据的HTML和CSS：

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

我还有一个jQuery代码，它设置了一个滚动abr的宽度，但不知道这是否有所不同：

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

更新

我忘了包含一个Jfiddle，这是一个jsfiddle，你可以看到它正确地将列与当前代码对齐。但是，为了让它在ie http://jsfiddle.net/q5ukD/1/

中执行此操作，必定会缺少某些内容

Answer 1

如何删除width:100%

上的#tableqanda_onthefly

Answer 2

为什么你的thead和tbody在单独的表中？将它们放在同一个表中会为我修复它。

表列不与IE中的固定标题对齐

2 个答案: