可滚动的 tbody
来源:互联网 发布:linux 复制全文 编辑:程序博客网 时间:2024/05/20 23:40
这个简单的技巧用来解决使固定表头(thead
)和滚动表体 (tbody
) 的问题。这使得数据表更易于浏览。当用户滚动表格时,固定表头为用户所注意的列提供了上下文。
为了使其工作,
第一步是:设置 tbody
为 display:block
,以便我们可以应用 height
和 overflow
属性。
下一步将是:设置thead
中的 tr
元素设置为 display:block
。
贴代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>可滚动的 tbody</title></head><style> .fixed_header tbody{ display:block; overflow: auto; height: 100px; } .fixed_header thead tr { display: block; } .fixed_header th, .fixed_header td { width: 200px; text-align: center; }</style><body><div> <table class="fixed_header"> <thead> <tr> <th>标题 1</th> <th>标题 2</th> <th>标题 3</th> </tr> </thead> <tbody> <tr> <td>row 1-0</td> <td>row 1-1</td> <td>row 1-2</td> </tr> <tr> <td>row 2-0</td> <td>row 2-1</td> <td>row 2-2</td> </tr> <tr> <td>row 3-0</td> <td>row 3-1</td> <td>row 3-2</td> </tr> <tr> <td>row 4-0</td> <td>row 4-1</td> <td>row 4-2</td> </tr> <tr> <td>row 5-0</td> <td>row 5-1</td> <td>row 5-2</td> </tr> <tr> <td>row 6-0</td> <td>row 6-1</td> <td>row 6-2</td> </tr> </tbody> </table></div></body></html>
阅读全文
0 0
- 可滚动的 tbody
- 可滚动的 tbody
- 可滚动的 tbody
- bootstrap的table表头固定tbody滚动
- tbody 加滚动条
- 如何给表格的tbody添加滚动条
- 简单的自定义固定表头thead tbody滚动 第二版
- 可滚动的ResultSet
- 可滚动的TextView
- 如何设置table的tbody高度,超出默认高度会出现滚动条!!!
- CSS设置table下tbody滚动条与thead对齐的方法
- 滚动条-可滚动文字的窗口
- TBODY标签的作用
- tbody的作用
- TBODY的作用
- tbody标签的作用
- 关于tbody的用法
- 隐藏的<tbody>
- webpack 从入门到工程实践
- 5分钟键盘鼠标无操作超时登录js
- MySQL分布式事务
- oj 回文子串
- redis 安装及 管理 window 环境
- 可滚动的 tbody
- dubbo 源码学习笔记 (三) —— dubbo引用服务的过程
- Linux命令----分析内存的瓶颈
- javasctipt通过高阶函数实现AOP
- 安卓的BP、AP、NV是什么意思
- webservice接口调用实例
- Access denied for user 'Administrator'@'localhost' (using password: YES)
- 计划任务的常见错误写法
- 英伟达发布Tesla V100 史上最强核弹售价102万元