th固定 td滚动的表格实现
为什么这样?
体验好
原理
通过两个表格,使其th td 对应,产生一种错觉。
代码
1.html
<div class="content">
<div class="table-head">
<table>
<colgroup>
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
</colgroup>
<thead>
<tr>
<th>日期</th>
<th >单价</th>
<th >数量</th>
<th >小计</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<colgroup>
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
</colgroup>
<tbody>
{loop $data $k $v}
<tr>
<td scope="row">{$v['date']}</td>
<td>{if isset($v['discount'])}¥{$v['price']}<span style="text-decoration:line-through;color:#999999;">¥{$v['oprice']}</span>{else}¥{$v['price']}{/if}</td>
<td>{$v['roomnum']}</td>
<td>¥{$v['subtotal']}</td>
</tr>
{/loop}
</tbody>
</table>
</div>
<div class="total">共 {$checknum} 晚 合计¥{$allprice}</div>
</div>
2.css
<style>
.table-head{padding-right:17px;background-color:#999;color:#000;}
.table-body{width:100%; height:390px;overflow-y:scroll;}
.table-head table,.table-body table{width:100%;}
.table-head tr,.table-body tr{line-height: 35px;}
.table-head th,.table-body td{text-align: center;}
.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
.total {
float:right;
padding-right: 20px;
margin-top:5px;
}
</style>
核心
<colgroup>
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
<col style="width: 25%;" /><col />
</colgroup>
th固定 td滚动的表格实现的更多相关文章
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- 放弃antd table,基于React手写一个虚拟滚动的表格
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...
- jfixed使固定行列可编辑表格
功能: 固定行列 可以在表格直接编辑 使用ajax对数据操作 使用tab键在可编辑列切换简单介绍一下jfixed 表格插件, jfixed /jfixed.rar
- css设置背景固定不滚动效果的示例
css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...
- layui静态表格固定td宽度,table固定td宽度
正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...
- Table实现表头固定 内容滚动
<div style="width: 800px;"> <div class="table-head"> <table> & ...
- flex上下固定中间滚动布局
传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动 ...
- table 的thead th 固定 tbody滚动例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 关于boostrap的thead固定tbody滚动
原文地址:http://blog.csdn.net/bbsyi/article/details/51126041# 1 <!DOCTYPE html> 2 <html> 3 & ...
随机推荐
- crawler spec
使用说明 0.写在前面 1.本程序完成的抓取网页并保存其文件的工作. 2.目前的版本还需将工程文件导入eclipse中运行. 3.加载主类MyCrawler生成可执行文件. 4.程序主界面: 1 准备 ...
- DB天气app冲刺二阶段第七天
又冲刺了一个礼拜了 今天收获应该算是不小了 虽然进度上来说还是一点也没前进 但是找到了好几个突破口 明天继续 今天先不多说了困了..
- Java 8 VM GC Tuning Guide Charter3-4
第三章 Generations One strength of the Java SE platform is that it shields the developer from the compl ...
- 30款jQuery常用网页焦点图banner图片切换 下载
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
- HTTP 错误 500.21 - Internal Server ErrorHTTP
应用程序“DEFAULT WEB SITE/WINDRP_TB/TBFXWS”中的服务器错误Internet Information Services 7.5错误摘要HTTP 错误 500.21 - ...
- AngularJs遇到的小坑与技巧
1. templateURL和路由之类的要在web server下运行. 2. 使用模板replace设为true,模板里也要有相应的标签,否则不出现任何数据. 3. 1.2版本之后,ngRoute模 ...
- Oracle数据库表的备份和数据表的删除操作
--Oracle数据库中的表备份: --备份语句:在备份之后就可以将这张表的所有数据源删除了,但是之后有人对这张表的数据进行操作,但是在操作完成之后要记得将数据表恢复 CREATE TABLE DZH ...
- pom配置进行版本号统一管理
在pom.xml中配置 <properties>在该配置中添加 <project.build.sourceEncoding>UTF-8</project.build. ...
- android 解析XML方式(三)
上一节中,我们使用SAX方式解析xml文档, SAX方式是基于事件驱动的.当然android的事件机制是基于回调函数的.在这一节中,我们用另外一种方式解析xml文档,这种方式也是基于事件驱动的,与SA ...
- HDU4670 Cube number on a tree 树分治
人生的第一道树分治,要是早点学我南京赛就不用那么挫了,树分治的思路其实很简单,就是对子树找到一个重心(Centroid),实现重心分解,然后递归的解决分开后的树的子问题,关键是合并,当要合并跨过重心的 ...