html - 固定标题滚动表中的表标题未正确显示

Question

下面是 fiddle ，只需点击“添加问题”按钮3次，然后滚动条就会出现在表格中:

http://jsfiddle.net/6rCyH/16/

问题是表格标题单元格与其余列的单元格不匹配。现在每个 <th> 的列单元格的类和 <td>是相同的，但单元格的宽度不相同，因此导致沿列向下的单元格之间的对齐方式不正确。

下面是表格的html:

<table id="qandatbl" align="center">
<thead class="tblhead">
<tr>
    <th class="qid">Question No</th>
    <th class="question">Question</th>
    <th class="optandans">Option and Answer</th>

</tr>
</thead>
<tbody class="tblbody">
</tbody>
</table>

下面是控制表格和每一列的主要CSS:

body{
    font-size:85%;  
}           

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

.qid { 
    min-width:3%;
    max-width:3%;
    font-weight:bold;
    border:1px black solid;
    border-collapse:collapse;
}

.question { 
    min-width:14%;
    max-width:14%;
    border:1px black solid;
    border-collapse:collapse;
}

.question textarea {
    min-width:auto;
    max-width:auto;
    resize:none;
    height:100%;
    font-size:100%;
}

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

.tblbody{
    background-color: #ddd;
    height: 400px;
    overflow: auto; 
}

.tblhead, .tblbody {
    display: block;
}

Answer 1

查看更新的 fiddle http://jsfiddle.net/6rCyH/51/

演示: http://jsfiddle.net/6rCyH/51/embedded/result/

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>");

.................
 you function code here
.................

setWidth();

}

function setWidth() {
    var questionCellWidth = $("#qandatbl_onthefly tbody .question").width();
    console.log(questionCellWidth);
    var questionCellHeight = $("#qandatbl_onthefly tbody .question").height();
    console.log(questionCellHeight);
    $(".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"});
    }
});

注意:我刚刚在此代码中创建了滚动功能并添加了垂直滚动表格行的功能，请参阅 setwidth()设置文本区域宽度的函数和用于查看滚动功能的 $(document).ready(function(){}); 函数。外观和感觉完全取决于您。您可以根据需要微调代码。