css table自适应斜线

复制下面这张斜线svg，可以修改颜色

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

设置好自己想要的svg后转base64

// 找到页面上面的svg元素
const svg = document.getElementById('svg');// 将整个 document 对象序列化为一个 XML 字符串
const s = new XMLSerializer().serializeToString(svg);// 通过window.btoa() 方法用于创建一个 base-64 编码的字符串
const img = `data:image/svg+xml;base64,${window.btoa(s)}`;

dom

<th class="lineTh" :colspan="treeList[0].length"><span style="float:left;margin-top:20px;">项目</span><span style="float:right;margin-top:10px;">日期</span>
</th>

css 背景图片使用base64的图片，宽度100%进行自适应

.lineTh {background: #38ADAB url(data:image/svg+xml;base64,PHN2ZyBkYXRhLXYtM2ZkOWYxMGI9IiIgaWQ9InN2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48bGluZSBkYXRhLXYtM2ZkOWYxMGI9IiIgeDE9IjAiIHkxPSIwIiB4Mj0iMTAwJSIgeTI9IjEwMCUiIHN0cm9rZT0iI0FGQUZBRiIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+) no-repeat 100% center;
}

css table自适应斜线相关推荐

table表头斜线自适应
需求:要求做一张表格,表头第一栏有斜线分割,且分割线也要跟随表格自适应思路:因为之前用了CSS去写,但是发现,只能实现固定的长和宽,如果页面伸缩,斜线就会破版,跟th或者td衔接不上.因此转而将目标 ...
bulma.css_如何建立一个？ Bulma CSS的自适应博客设计
bulma.css by ZAYDEK 由ZAYDEK oo (Ooooooh) 如何建立一个? Bulma CSS的自适应博客设计 (How To Build A ? Responsive Blog ...
CSS Table（表格）
** 首先介绍表格标签 ** 一个完整的表格示例如下 <table> <tr> <th>Firstname</th> <th>Lastnam ...
纯CSS制作自适应分页条-分享------彭记（019）
纯css制作自适应分页条效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
html分割线自动适应,CSS实现自适应分隔线的N种方法
CSS实现自适应分隔线的N种方法分割线是网页中比较常见的一类设计了, 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景 ...
CSS实现自适应浏览器宽度的正方形
2019独角兽企业重金招聘Python工程师标准>>> CSS实现自适应浏览器宽度的正方形有以下三种方法: 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分 ...
css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
CSS实现自适应的图片背景边框代码
代码简介: CSS漂亮的图片边框,边框是用背景图片修饰的,不过可以自适应大小,这点挺实用的,不论你的图片有多大,它始终显示在图片的外围,不会错位,这当然还要归功于CSS的功劳. 代码内容: View ...
html自动适应屏幕分辨率,css如何自适应屏幕大小？
css如何自适应屏幕大小?下面本篇文章给大家介绍一下使用CSS实现屏幕大小自适应的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何自适应屏幕大小? 要想实现css屏幕 ...

css table自适应斜线

css table自适应斜线相关推荐

最新文章

热门文章