css折叠表格
1.html
<div class="custom-fold-table">
<table cellpadding="0" cellspacing="0" width="100%" class="ellipsis-thead custom-table last-column-center table-border">
<thead>
<tr>
<th width="12%">编号</th>
<th width="18%" class="tal">名称</th>
<th width="12%" class="tal">总造价（元）</th>
<th width="12%" class="tal">占工程费用比例</th>
<th width="12%" class="tal">单方造价(元/m2)</th>
<th width="9%">指标标杆</th>
</tr>
</thead>
</table>
<div class="tree-table">
<div class="tr-level-1">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click"><div class="arrow-icon"></div>001</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%"><p class="red">154561</p></td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-2">
<div class="tr-level-2">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click font-bold"><div class="arrow-icon"></div>0011</td>
<td width="18%" class="font-bold">土建工程</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%"><span class="red">154561</span></td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-3">
<div class="tr-level-3">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click"><div class="arrow-icon"></div>00111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-4">
<div class="tr-level-4">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click"><div class="arrow-icon"></div>001111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-5">
<div class="tr-level-5">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%">001111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="tr-level-3">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click"><div class="arrow-icon"></div>00111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-4">
<div class="tr-level-4">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click"><div class="arrow-icon"></div>001111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-5">
<div class="tr-level-5">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%">001111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tr-level-2">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click font-bold"><div class="arrow-icon"></div>0011</td>
<td width="18%" class="font-bold">土建工程</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%"><span class="red">154561</span></td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-3">
<div class="tr-level-3">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click"><div class="arrow-icon"></div>00111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-4">
<div class="tr-level-4">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click"><div class="arrow-icon"></div>001111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-5">
<div class="tr-level-5">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%">001111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="tr-level-3">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click"><div class="arrow-icon"></div>00111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-4">
<div class="tr-level-4">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%" class="fold-click"><div class="arrow-icon"></div>001111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
<div class="level-5">
<div class="tr-level-5">
<table class="custom-table ellipsis-table last-column-center table-border">
<tbody>
<tr>
<td width="12%">001111</td>
<td width="18%">分部分项合计</td>
<td width="12%">154323000</td>
<td width="12%">20%</td>
<td width="12%">154561</td>
<td width="9%">154323000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2.css
/*折叠表格*/
.custom-fold-table .custom-table{width:100%;border-collapse:collapse;}
.custom-fold-table .custom-table>thead>tr{background-color:#fffbf8;}
.custom-fold-table .custom-table>thead>tr>th{position:relative;height:44px;font-size:14px;text-align:left;padding:0 10px;}
.custom-fold-table .custom-table>thead>tr>th:first-child{border-left:0;}
.custom-fold-table .custom-table.first-column-center>thead>tr>th:first-child,
.custom-fold-table .custom-table.first-column-center>tbody>tr>td:first-child{text-align:center;}
.custom-fold-table .custom-table.last-column-center>thead>tr>th:last-child,.custom-fold-table .custom-table.last-column-center>tbody>tr>td:last-child{text-align:center;}
.custom-fold-table .custom-table>tbody>tr:hover{background-color:#FEF3F3;}
.custom-fold-table .custom-table>tbody>tr>td{position:relative;text-align:left;padding:0 10px;color:#354052; border-bottom:1px solid #e5e5e5;height: 40px;}
.ellipsis-thead{table-layout:fixed;}
.ellipsis-thead th{width:100%;}
/*表格有边框*/
.custom-fold-table .table-border th{padding: 0 3px; border:1px solid #e5e5e5; border-right: none;}
.custom-fold-table .table-border>thead>tr>th:first-child{border-left:1px solid #e5e5e5;;}
.custom-fold-table .table-border td{border-left:1px solid #e5e5e5;}
.custom-fold-table .table-border{border-right:1px solid #e5e5e5; }
.tree-table .tr-level-2:last-of-type div:last-of-type:before{content:'';border-bottom:0;}
/*树形表格组件*/
/*.tree-table table>tbody>tr:hover{background-color:transparent;}*/
.tree-table .tr-level-1{position:relative;/*background-color:#fff;*/}
.tree-table .tr-level-2{position:relative;display:none;/*background-color:#f4f8fb;*/}
.tree-table .tr-level-2 table>tbody>tr>td:first-child{text-indent:35px;position:relative;}
.tree-table .tr-level-2:before{content:'';position:absolute;left:0;top:0;bottom:0;width:50px;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;}
.tree-table .tr-level-3{position:relative;display:none;/*background-color:#E9EFF5;*/}
.tree-table .tr-level-3 table>tbody>tr>td:first-child{text-indent:58px;}
.tree-table .tr-level-3:before{content:'';position:absolute;left:0;top:-1px;bottom:0;width:70px;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2;}
.tree-table .tr-level-4,.tree-table .tr-level-5{position:relative;display:none;/*background-color:#e3eaf0;*/}
.tree-table .tr-level-4 table>tbody>tr>td:first-child{text-indent:80px;}
.tree-table .tr-level-5 table>tbody>tr>td:first-child{text-indent:104px;}
.tree-table .tr-level-4:before{content:'';position:absolute;left:0;top:-1px;bottom:0;width:90px;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2;}
.tree-table .tr-level-5:before{content:'';position:absolute;left:0;top:-1px;bottom:0;width:110px;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2;}
/*树形表格组件左边的线*/
.tree-table .tr-level-2:after{content:'';position:absolute;left:21px;top:0;height:100%;/*bottom:0;*/border-left:1px solid #CAD6E1;}
.tree-table .tr-level-1 .tr-level-2:last-child:after{top:0;height:21px;}
.tree-table .tr-level-1 .tr-level-2.last-child:after{top:0;height:21px;}
.tree-table .tr-level-3:after{content:'';position:absolute;left:41px;top:0;height:100%;border-left:1px solid #CAD6E1;}
.tree-table .tr-level-2 .tr-level-3:last-child:after{top:0;height:21px;}
.tree-table .tr-level-2 .tr-level-3.last-child:after{top:0;height:21px;}
.tree-table .tr-level-4:after,.tree-table .tr-level-5:after{content:'';position:absolute;left:61px;top:0;height:100%;border-left:1px solid #CAD6E1;}
.tree-table .tr-level-5:after{left:80px;}
.tree-table .tr-level-3 .tr-level-4:last-child:after{top:0;height:21px;}
.tree-table .tr-level-4 .tr-level-5:last-child:after{top:0;height:21px;}
.tree-table .tr-level-3 .tr-level-4.last-child:after{top:0;height:21px;}
.tree-table .tr-level-4 .tr-level-5.last-child:after{top:0;height:21px;}
.tree-table .tr-level-2 tr>td:first-child{background:url(../img/common/treetable-line.png) no-repeat 21px -55px;}
.tree-table .tr-level-2 tr>td.active:first-child{background-position:21px -5px;}
.tree-table .tr-level-3 tr>td:first-child{background-position:41px -55px;}
.tree-table .tr-level-3 tr>td.active:first-child{background-position:41px -5px;}
.tree-table .tr-level-4 tr>td:first-child{background-position:60px -55px;}
.tree-table .tr-level-5 tr>td:first-child{background-position:80px -55px;}
.tree-table .tr-level-4 tr>td.active:first-child{background-position:60px -5px;}
.tree-table .tr-level-5 tr>td.active:first-child{background-position:80px -5px;}
.tree-table .fold-click{cursor:pointer;}
.tree-table .fold-click>.arrow-icon{display:inline-block;vertical-align:middle;width:23px;height:20px;background:url(../img/common/sprite-up.png) no-repeat -1px 0;cursor:pointer;}
.tree-table .fold-click.active>.arrow-icon{background-position:-22px 0;}
3.js
// 折叠表格数组件
$(document).on('click','.tree-table .fold-click',function (e) {
if($(this).hasClass('active')){
$(this).toggleClass('active').closest('table').nextAll().children().slideUp();
}
else{
$(this).toggleClass('active').closest('table').nextAll().children().slideDown();
}
});
// 给每一层级的最后一行添加last-child类，兼容ie8左侧线条
$(".tree-table .tr-level-1 .tr-level-2:last-child,.tree-table .tr-level-2 .tr-level-3:last-child,.tree-table .tr-level-3 .tr-level-4:last-child,.tree-table .tr-level-4 .tr-level-5:last-child").addClass('last-child');
附图：
————————————————
版权声明：本文为CSDN博主「低_调_哥」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/caiyongshengcsdn/article/details/79308555
css折叠表格的更多相关文章
- CSS控制表格（table）样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
- 四个好看的CSS样式表格
文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...
- 常用的四种CSS样式表格
1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...
- 巧妙使用div+css模拟表格对角线
首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...
- 折叠表格思路及遇到的问题(tableView:viewForHeaderInSection:的section从1开始，不是从0开始)
项目需要做了一个类似qq联系人的折叠表格,思路很简单:设置每个section的header,在header上显示组名等信息,然后根据折叠与否,设置每个section中cell的数量,如果折叠,则将之设 ...
- 问题：table 可否实现对角线；结果：用div+css模拟表格对角线
首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...
- CSS控制表格嵌套
网页设计应用中,当我们不能完全放弃表格的使用时,为了达到预期的效果,不免要用到表格嵌套(特别是多层嵌套)方式来进行布局.可能很多同仁都遇到过这样的问题,为了达到显示效果要为每一个(每一层)的表格写不同 ...
- 学习笔记 第九章 使用CSS美化表格
第9章 使用CSS美化表格 学习重点 正确使用表格标签: 设置表格和单元格属性: 设计表格的CSS样式. 9.1 表格的基本结构 表格由行.列.单元格3部分组成,单元格时行与列交叉的部分. 在HTM ...
- html table 美化-html如何用css美化表格
html用css美化表格的方法:首先创建一个HTML示例文件:然后在body中创建table表格:最后通过style标签给表格添加css样式即可. 代码 下面通过示例来看看. /*表格样式*/ tab ...
随机推荐
- vscode 插件推荐 - 献给所有前端工程师（2018.4.29更新）
大家好,我是Moer.VScode现在已经越来越完善.性能远超Atom和webstorm,你有什么理由不用它?在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知 ...
- 石川es6课程---12、Promise
石川es6课程---12.Promise 一.总结 一句话总结: 用同步的方式来书写异步代码,让异步书写变的特别简单 用同步的方式来书写异步代码Promise 让异步操作写起来,像在写同步操作的流程, ...
- Android新项目GBSS：第1篇 搭建开发环境
最近接手一个Android新项目,之前也没做过这方面的开发,算是边学边干,这两天看了一下Android开发的书,大致入门了一点,今天把所需要的软件都下了下来,准备开工,先列一下开发环境: 所有的软件都 ...
- EBI架构 VS. MVC
和 MVC 模式中的 Model 代表着整个后端(包括所有实体.服务和它们之间的关系在内的一切)一样,EBI 模式将边界看作是和外部世界的完整连接,而不仅仅是一个视图.一个控制器或是一个接口(这里指的 ...
- C# 实现DataTable、DataSet与XML互相转换
/**//// <summary> /// 把DataSet.DataTable.DataView格式转换成XML字符串.XML文件 /// </summary> public ...
- WebStrom编程小技巧--HTML快速创建指定id或者类名的div
打印div标签快速方法:“先打出#yz,然后Tab键补全即可获得<div id="yz"></div>同理:我们也可以先打出“.tz"然后Tab键 ...
- php文件上传系统
一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...
- python matplotlib 多图像排列显示
用OpenCV和matplotlib实现多图排列,代码如下: import cv2 import matplotlib.pyplot as plt img = cv2.imread('C:\\User ...
- android webview 访问 https 页面
在android 中利用webview 控件进行开发过程中,可能会遇到 webview 访问不了https://的页面如 https://www.google.com.hk 重写onReceivedS ...
- finereport 填报 单元格 JS 触发 提交SQL 事件
var location = this.options.location; var cr = FR.cellStr2ColumnRow(location); var col = cr.col; var ...