如何设置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>
<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">
<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>
<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>
<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>
<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
- 如何设置table的tbody高度,超出默认高度会出现滚动条!!!
- 如何让表格在超出高度出现滚动条
- div超出高度的时候出现滚动条
- div 固定高度,设定比例的宽度,超出指定高度时竖直滚动条出现
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- html,body设置高度100%和默认的滚动条
- html,body设置高度100%和默认的滚动条
- 内容超出div高度出现滚动条或者隐藏
- JavaScript ---- swiper超出高度允许滚动条
- js如何获取滚动条的高度
- js代码,当div中内容高度超出div高度的时候实现定制滚动条!
- textarea如何实现高度自适应(不出现滚动条)?
- IE6中设置 div 的最小高度 页面不出现滚动条
- iframe高度设置100%了,并且设置了无滚动条属性,还是出现滚动条
- iframe高度设置100%了,并且设置了无滚动条属性,还是出现滚动条
- CSS设置table下tbody滚动条与thead对齐的方法
- JavaScript 固定DIV高度,超出部分自动添加滚动条
- 超过指定高度出现滚动条
- Goldbach's Conjecture_POJ 2262
- 重建二叉树
- 【TeamTalk】源码分析之服务端描述
- C++上机实验报告4:输出星形号
- DOM节点的创建
- 如何设置table的tbody高度,超出默认高度会出现滚动条!!!
- Android沉浸式状态栏
- Nginx配置详解
- 深入理解Activity的生命周期
- UITableView和UITableViewCell的几种样式
- Linux入门教程:Linux权限管理
- 安卓数据的文件保存和取出
- ThinkPHP_No input file specified_RewriteEngine
- c++作业3