table 斜线表头

实现原理:

去掉第一个单元格的下边框
第一列第一个和第二个单元格的伪元素设置绝对定位, 宽度1px,高度视情况而定
通过旋转两个单元格的伪元素,设置旋转起点,使两个伪元素重合,达到斜线的效果

<el-table:data="tableData3"style="width: 100%"><el-table-columnlabel="医疗机构"align="right"width="150"><el-table-columnprop="name"label="收费项目"width="120"></el-table-column></el-table-column><el-table-columnv-for="(item,index) of mechanism":label="item"align="center":key="item"width="120"><el-table-columnlabel="次数"align="center"width="120"><template slot-scope="scope">{{scope.row.mechanism[index].frequency}}</template></el-table-column><el-table-columnlabel="费用"align="center"width="120"><template slot-scope="scope">{{scope.row.mechanism[index].cost}}</template></el-table-column></el-table-column></el-table>

.el-table thead.is-group th {background: none;}.el-table thead.is-group tr:first-of-type th:first-of-type {border-bottom: none;}.el-table thead.is-group tr:first-of-type th:first-of-type:before {content: '';position: absolute;width: 1px;height: 75px; /*这里需要自己调整，根据td的宽度和高度*/top: 0;left: 0;background-color: grey;opacity: 0.3;display: block;transform: rotate(-53deg); /*这里需要自己调整，根据线的位置*/transform-origin: top;}.el-table thead.is-group tr:last-of-type th:first-of-type:before {content: '';position: absolute;width: 1px;height: 75px; /*这里需要自己调整，根据td的宽度和高度*/bottom: 0;right: 0;background-color: grey;opacity: 0.3;display: block;transform: rotate(-54deg); /*这里需要自己调整，根据线的位置*/transform-origin: bottom;}

mechanism: ['医疗机构A', '医疗机构B', '医疗机构C', '医疗机构D'],tableData3: [{name: '项目A',mechanism: [{frequency: 8,cost: 1000},{frequency: 9,cost: 2000},{frequency: 10,cost: 3000},{frequency: 11,cost: 4000}]},{name: '项目B',mechanism: [{frequency: 3,cost: 3001},{frequency: 4,cost: 2002},{frequency: 5,cost: 2003},{frequency: 6,cost: 2004}]}]

table 斜线表头相关推荐

【css实现table斜线表头】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
css 实现 table斜线表头
border-left border-right border-top border-bottom 能实现特殊形状 [html] view plain copy <!DOCTYPE html ...
python表格绘制斜线表头_在table表格中实现圆角效果
在table中设置border-radius发现不起作用,网上查找了一番,原因是border-collapse:collapse和border-radius不兼容. 设计图效果代码实现效果: #ta ...
5种做法实现table表格中的斜线表头效果
table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法直接去 ...
html：table表格如何实现斜线表头
今天分享下"html:table表格如何实现斜线表头"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与应用价值,需要的朋友接下来跟着云南仟龙Mark一起 ...
java实现table斜线,诸位大神，怎样在table的 td中添加一条斜线
各位大神 ,怎样在table的 td中添加一条斜线? 各位大神 ,怎样在table的 td中添加一条斜线? 分享到: 更多 ------解决方案-------------------- tabl ...
Latex 制作斜线表头、合并行列单元格
这篇文章主要给出一些 Latex 制作斜线表头.合并行单元格与合并列单元格的 demo 演示 latex:制作斜线表头 \begin{tabular}{|l|ccc|} \hline \diagbox ...
element表格实现合并行或列，实现斜线表头
文章目录前言一.合并行或列实现效果完整代码二.斜线表头实现效果完整代码总结前言 element的table是常用的组件,在使用中会出现一些特殊的需求,这里总结了两个案例. 一.合并行 ...
LaTeX插入矩阵、表格、带斜线表头的表格、图片、超链接
LaTeX插入数组.表格.带斜线表头的表格.图片.超链接插入矩阵一个 5×5 的矩阵: \begin{equation}\nonumber \begin{aligned} \left[ \begi ...

table 斜线表头

实现原理:

table 斜线表头相关推荐

最新文章

热门文章