table表格表头添加斜线

效果

实现

html部分

<table border="1"><tr><td><span class="span-5 span-left">参与人</span><span class="span-5 span-right">候选人</span></td></tr>
</table>

css部分

<style>
#lineTd {position: relative;background: #fffurl(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9IiNkZmU2ZWMiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPgo=)no-repeat 100% center;
}
.cell {width: 120px;// width: 150px;padding: 10px;box-sizing: border-box;
}
.span-5 {display: inline-block;width: 50%;
}
.span-left {position: absolute;bottom: 0;
}
.span-right {position: absolute;top: 0;right: 0;
}
</style>

其中PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9IiNkZmU2ZWMiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPgo=是base64加密后的代码
解密后：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#dfe6ec" stroke-width="1"/></svg>

代码中的#dfe6ec是颜色，支持16进制颜色编码，修改颜色后，重新base64加密替换原来的加密代码即可。

table表格表头添加斜线相关推荐

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
html：table表格如何实现斜线表头
今天分享下"html:table表格如何实现斜线表头"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与应用价值,需要的朋友接下来跟着云南仟龙Mark一起 ...
Element 中的表格表头添加搜索图标和功能
Element 中的表格表头添加搜索图标和功能主要实现 table的slot='header' headerData是表头的循环数组 tableData是表格内容的数组 <template s ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
html表格中加下拉,怎样在iview的Table表格中添加下拉菜单？
我怎么在table表格里面添加下拉菜单 render: (h, params) => { return h('div', [ h('Button', { props: { type: 'prim ...
5种做法实现table表格中的斜线表头效果
table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法直接去 ...
vue2 ElementUI 表单标签、表格表头添加问号图标提示
文章目录 1. 问题背景 2. element-ui悬浮提示定义 3. 基础 4. 延申 5. 参考 1. 问题背景使用element-ui有时候需要对表格的表头.表单的标签进行自定义,添加问号的悬 ...
jQuery为table表格动态添加或删除tr
HTML页面元素如下:  <div id="contractDetailDiv" title="销售订单明细&qu ...
table表格中画斜线
在html.jsp中经常用到table,但在table中如何实现标题表格中画斜线的操作呢?从网上查了很多资料,可以实现的方法有好几种,现在提供一种简单的操作方法,而且不用考虑分辨率的问题,方法如下: ...

table表格表头添加斜线

效果

实现

table表格表头添加斜线相关推荐

最新文章

热门文章