私はここに埋め込まれているjsfiddleを持っています(IEと他の1つのメジャーブラウザで開いてください):
http://jsfiddle.net/6rCyH/51/embedded/result/
http://jsfiddle.net/6rCyH/51/(コードが表示されるように通常のフィドル)
フィドルを使用するには、[質問の追加]を複数回クリックするだけで、下の表に行が追加されます。
私の問題は、Safari、Opera、Chrome、Firefoxのいずれかの主要なブラウザで列が正しく配置されているのに、IEでは正しく配置されていないことです。
列ごとの各テーブルセルには同じ幅が含まれていますが、私が見ることができる問題は、IEのスクロールバーが他のブラウザよりもはるかにテーブルの奥にあることです。私の質問は、他の列の配置に問題が発生しないように、テーブルの横にスクロールバーを配置するための最良の方法は何ですか?このテーブルは、ヘッダーが固定されたスクロールテーブルであると想定されています。
以下はコードです:
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>
更新された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"});
}
});