わずかな問題を除いて完全に機能する固定ヘッダーを持つスクロールテーブルを作成しています。列は 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;
}
スクロール abr の幅を設定する jQuery コードもありますが、これが違いを生むかどうかはわかりません。
$(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/