我正在创建一个带有固定标题的滚动表，除了一个小问题外，它工作得很好。这些列与 IE 中的标题不对齐，但它们在其他主要浏览器（Chrome、firefox、opera、safari）中正确对齐
我的问题是我需要添加甚至删除什么，以便我可以在 IE 中对对齐进行排序？
下面是一个屏幕截图，显示了它的样子：
下面是关于上表的 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"> </td>
<td width="11%" class="videotd"> </td>
<td width="11%" class="audiotd"> </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"> </td>
<td width="11%" class="videotd"> </td>
<td width="11%" class="audiotd"> </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 中必须缺少一些东西才能在 ie 中执行此操作：http: //jsfiddle.net/q5ukD/1/