如何实现给table表头加斜线

方法一：

    <el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 20px"><el-table-column label="数量" width="180"><!-- 在方法二中，无需嵌套下面这行 --><el-table-column prop="name" label="Name" /></el-table-column><el-table-column prop="amount1" label="Amount 1" /><el-table-column prop="amount2" label="Amount 2" /><el-table-column prop="amount3" label="Amount 3" /></el-table>

需要注意的是：下列样式在style中加scoped会不生效，可以自行给每个类名加 :deep() 来实现

.el-table thead.is-group th {background: none;padding: 0px;}.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 div.cell {text-align: right;/*上边文字靠右*/}.el-table thead.is-group tr:last-of-type th:first-of-type div.cell {text-align: left;/*下边文字靠左*/}/*实现斜线代码*/.el-table thead.is-group tr:first-of-type th:first-of-type:before {content: "";position: absolute;width: 1px;height: 200px;/*斜线的长度*/top: 0;left: 0;background-color: grey;opacity: 0.2;display: block;/*调整斜线的角度*/transform: rotate(286deg);/*调整斜线的角度*/-webkit-transform-origin: top;transform-origin: top;}

方法二

thead tr:first-child th:first-child {position: relative;background: linear-gradient(28deg,transparent 50%,#d7d5d5 50%,#d7d5d5 50.5%,transparent 50.5%);
}
thead tr:first-child th:first-child .cell{position: absolute;top: 0px;right: 0;width: 100px;font-size: 14px;
}
thead tr:first-child th:first-child:after{content: 'Name';position: absolute;left: 10px;// bottom: 10px;color: #909399;
}

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片，如果不指定方向，默认从上到下渐变。

linear-gradient(direction, color-stop1, color-stop2, ...)

direction：用角度值指定渐变的方向（或角度）。

color-stop：用于指定渐变的起止颜色。

background-image: linear-gradient(45deg,red, yellow, blue);

如何实现给table表头加斜线相关推荐

给Table表头加必选小星号
给Table表头加必选小星号 html代码 <el-table-column label="'数量'" :render-header="addRedStar&quo ...
【学习总结】关于vue中table表头加粗与遮挡问题
table表头的修改遇到的问题解决方法详细解释遇到的问题我想实现的效果但是我实际出现的效果仔细观察,发现存在以下问题: 1.表头的背景与遮挡 2.加上边界在项目中找到了对应的界面代码, ...
element ui表格表头加斜线，表头加数字，第一列加颜色
先看效果: 1.template slot="header" 设置表头 2.yjlbTableTh为表头数据 3.yjlbData表格数据 <template>< ...
vue使用Export2Excel.js导出表格自定义样式（表头加分割斜线）（笔记）
1.Export2Excel.js 文件内容 /* eslint-disable */ /** 导出Excel需要依赖 * npm install xlsx file-saver -S * npm i ...
vue table表格中只有表头加竖线分割
table表格中只有表头加竖线分割给<el-table>加一个属性 : :header-cell-style="{'border-right':'1px solid #8888 ...
layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
如何给单元格加斜线？
在制作表格过程中,经常要给表头加上斜线.制作方法如下: 先在A1单元格上单击鼠标,先输入右上端文本"科目",按Alt+Enter键,再输入左下端文本"姓名",按 ...
Excel如何给单元格加斜线
在制作表格过程中,经常要给表头加上斜线,如下图所示. 制作方法如下:先在A1单元格上单击鼠标,先输入右上端文本"科目",按Alt+Enter键,再输入左下端文本"姓名&q ...

如何实现给table表头加斜线

方法一：

方法二

如何实现给table表头加斜线相关推荐

最新文章

热门文章