下面是小提琴,只需点击“添加问题”按钮 3 次,滚动条就会出现在表格中:
问题是表格标题单元格与其余列的单元格不匹配。<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;
}