如何设置table的tbody高度,超出默认高度会出现滚动条!!!
2017-04-05 14:50
423 查看
需求:标题栏固定,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>
结果如图
相关文章推荐
- 如何设置table的tbody高度,超出默认高度会出现滚动条!!!
- 如何设置不同组section的的头部高度?tableView heightForHeaderInSection
- wpf 如何设置滚动条在超出范围的时候才显示?(转)
- 一种table超出高度自动出滚动条的解决方案
- CSS设置table下tbody的滚动条
- table给tbody设置滚动条
- html,body设置高度100%和默认的滚动条(转)
- 如何用约束设置UITableView的tableHeaderView,其中tableHeaderView的高度是动态变化的
- 如何先设置tableView的高度
- html,body设置高度100%和默认的滚动条
- 关于如何给<input type="date">设置默认当前日期的方法 和 给table固定宽度
- 如何让表格在超出高度出现滚动条
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- CSS设置table下tbody滚动条与thead对齐的方法
- 如何设置tableView的组的头视图的高度?为什么你设置的tableView的组的头视图的高度无效呢?
- 如何设置static tableview的section区域高度
- 如何设置table中td的高度为1px
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- 如何设置table中<tr>和<td>的高度
- 如何把 vc 6 调试器设置成 系统默认调试器?