如何应用垂直滚动条TBODY [英] How to apply vertical scrollbar for TBODY
本文介绍了如何应用垂直滚动条TBODY的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在表中有4列和5行数据。我必须为TBODY应用垂直滚动条,TH标题内容不应该滚动。
I have 4 column and 5 row data in table. I have to apply vertical scrollbar for TBODY, the TH header content should not scroll.
我编写的场景,它的工作正常,直到我应用滚动类到TBODY。一旦我应用滚动样式类到TBODY它打破了上一个对齐。任何一个可以帮助解决这个问题.. advance感谢
I coded the scenario and it's working fine until I apply the scroll class to TBODY. Once I apply the scroll style class to TBODY it breaks the previous alignment. Can any one help to fix this issue.. advances Thanks
<table class="banker-list">
<colgroup><col width="40%"><col width="23%"><col width="24%"><col width="13%"></colgroup>
<thead>
<tr>
<th><p class="fieldLabel">Banker<span class="requiredFieldIndicator">*</span></p></th>
<th><p class="fieldLabel">High Balance (<span class="seg-hb">30</span>)</p></th>
<th><p class="fieldLabel">High Potential (<span class="seg-hp">60</span>)</p></th>
<th><p class="fieldLabel">Core (<span class="seg-core">10</span>)</p></th>
</tr>
</thead>
<tbody class="bankerScroll">
<tr>
<td><input class="banker-name" name="send-to-banker" id="banker_0" type="checkbox"> <label for="banker_0">JOHN</label></td>
<td><input name="banker_0_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_0_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_0_segment" disabled="disabled" type="checkbox"></td>
</tr>
<tr class="oddRow">
<td><input class="banker-name" name="send-to-banker" id="banker_1" type="checkbox"> <label for="banker_1">JOHN</label></td>
<td><input name="banker_1_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_1_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_1_segment" disabled="disabled" type="checkbox"></td>
</tr>
<tr>
<td><input class="banker-name" name="send-to-banker" id="banker_2" type="checkbox"> <label for="banker_2">JOHN</label></td>
<td><input name="banker_2_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_2_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_2_segment" disabled="disabled" type="checkbox"></td>
</tr>
<tr class="oddRow">
<td><input class="banker-name" name="send-to-banker" id="banker_3" type="checkbox"> <label for="banker_3">JOHN</label></td>
<td><input name="banker_3_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_3_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_3_segment" disabled="disabled" type="checkbox"></td>
</tr>
<tr>
<td><input class="banker-name" name="send-to-banker" id="banker_4" type="checkbox"> <label for="banker_4">JOHN</label></td>
<td><input name="banker_4_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_4_segment" disabled="disabled" type="checkbox"></td>
<td><input name="banker_4_segment" disabled="disabled" type="checkbox"></td>
</tr>
</tbody>
</table>
TABLE {
border-collapse: collapse;
width: 100%;
}
P, TABLE {
font-family: Verdana;
text-align: left;
}
.dataRow {
margin-bottom: 5px;
margin-top: 5px;
}
.fieldLabel {
color: #000000;
font-size: 85%;
font-weight: bold;
}
.bankerScroll {
display:block;overflow:auto;height:100px;white-space:nowrap;
}
推荐答案
http://www.imaputz。 com / cssStuff / bigFourVersion.html
您必须将display:block添加到thead> tr和tbody
You have to add the display:block to the thead > tr and tbody
这篇关于如何应用垂直滚动条TBODY的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文