如何设置table的tbody高度,超出默认高度会出现滚动条!!!

来源:互联网 发布:手机如何共享wifi网络 编辑:程序博客网 时间:2024/05/23 12:05

需求:标题栏固定,tbody里的内容滑动;

  解决方案:用的是两个div内套了两个table,一个放thead,一个放thead,看起来像是一个table。padding-right:17px是指滚动条的宽度
 代码如下:
标题
<div  style="background:#EAEAEA;padding-right:17px">
<table class="footable foottable_tab">
<thead>
<tr bgcolor="#fafafa">
<th width="60">选择</th>
<th width="100">模板名称</th>
<th width="100">模板类型</th>
<th width="100">创建时间</th>
<th width="400">参数说明</th>
</tr>
</thead>
</table>
</div>
tbody部分
<div style="width:100%;height:200px;overflow:auto; border-bottom:1px solid #dddddd">
<table id="Template_listZ" class="footable foottable_tab" >
<tbody id="tplWrapper_TemplateZ">
<tr>
<td width="60" align="center"><input type="checkbox" id="checkbox" name="choose" value=""></td>
                        <td width="100" align="center">正常还款</td>
<td width="100" align="center">BatPro</td>
<td width="100" align="center">2016-09-26</td>
<td width="400" align="center">aaaaaaaaaa</td>
</tr>
<tr>
<td width="60" align="center"><input type="checkbox" id="checkbox" name="choose" value=""></td>
                        <td width="100" align="center">正常还款</td>
<td width="100" align="center">BatPro</td>
<td width="100" align="center">2016-09-26</td>
<td width="400" align="center">aaaaaaaaaa</td>
</tr>
<tr>
<td width="60" align="center"><input type="checkbox" id="checkbox" name="choose" value=""></td>
                        <td width="100" align="center">正常还款</td>
<td width="100" align="center">BatPro</td>
<td width="100" align="center">2016-09-26</td>
<td width="400" align="center">aaaaaaaaaa</td>
</tr>
</tbody>
</table>
</div>
结果如图

1 0
原创粉丝点击