效果图

实现思路

实现代码

# line.svg

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

# table.html

<style>

.first-cell {

     background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPgo=) no-repeat 100% center;

  }

</style>

<div class="pw-info first-cell">

  <span class="pw-title">评委</span>

  <span class="candidate-title">被评人</span>

</div>

通过css实现表格的斜线的更多相关文章

  1. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  2. 问题：table 可否实现对角线；结果：用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  3. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  4. 四个好看的CSS样式表格

    文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...

  5. 常用的四种CSS样式表格

    1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...

  6. CSS控制表格嵌套

    网页设计应用中,当我们不能完全放弃表格的使用时,为了达到预期的效果,不免要用到表格嵌套(特别是多层嵌套)方式来进行布局.可能很多同仁都遇到过这样的问题,为了达到显示效果要为每一个(每一层)的表格写不同 ...

  7. 学习笔记 第九章 使用CSS美化表格

    第9章  使用CSS美化表格 学习重点 正确使用表格标签: 设置表格和单元格属性: 设计表格的CSS样式. 9.1 表格的基本结构 表格由行.列.单元格3部分组成,单元格时行与列交叉的部分. 在HTM ...

  8. css折叠表格

    1.html <div class="custom-fold-table"> <table cellpadding="0" cellspaci ...

  9. html table 美化-html如何用css美化表格

    html用css美化表格的方法:首先创建一个HTML示例文件:然后在body中创建table表格:最后通过style标签给表格添加css样式即可. 代码 下面通过示例来看看. /*表格样式*/ tab ...

随机推荐

  1. 【豆科基因组】绿豆Mungbean, Vigna radiata基因组2014NC

    目录 来源 一.简介 二.结果 基因组组装 重复序列和转座子 基因组特征和基因注释 绿豆的驯化 豆科基因组复制历史 基于转录组分析的豇豆属形成 绿豆育种基因组资源 三.讨论 四.方法 材料 组装 SN ...

  2. AnnotationHub, clusterProfiler 进行GO，KEGG注释

    ️ AnnotationHub 目前最新的工具包叫做AnnotationHub,顾名思义,就是注释信息的中装站.通过它,能找到了几乎所有的注释资源.如果没有,你还可以根据已有的数据用它提供的函数进行构 ...

  3. 用Rsync实现windows下同步linux服务器的数据

    一:环境 1.服务端:Red Hat Enterprise Linux Server release 6.4 (Santiago) 2.客户端:windows7旗舰版64位 3.同步对象:测试数据 4 ...

  4. Label -- 跳出循环的思路

    let num = 0 ; outPoint: //label for (let i = 0; i < 10; i++) { for ( let j = 0; j < 10; j++) { ...

  5. 截取字符串、拼接字符串【c#】

    string compname="1与3"; String[] name = compname.Split('与'); string namer=name[0]; namer=1 ...

  6. Portrait Photography Beginners Guide

    Please visit photoandtips稻糠亩 for more information. 六级/考研单词: vogue, derive, gorgeous, thereby, strict ...

  7. zabbix之监控MySQL

    #:先配置MySQL的主从 #:安装Percona Monitoring Plugins (地址:https://www.percona.com/downloads/)#:我安在从库,监控哪个就安哪个 ...

  8. Java Spring 自定义事件监听

    ApplicationContext 事件 定义一个context的起动监听事件 import org.springframework.context.ApplicationListener; imp ...

  9. RHEL 6.5安装系统

    转自如下链接: http://www.jb51.net/os/128752.html

  10. SpringIOC原理

    IOC(DI):其实这个Spring架构核心的概念没有这么复杂,更不像有些书上描述的那样晦涩.java程序员都知道:java程序中的每个业务逻辑至少需要两个或以上的对象来协作完成,通常,每个对象在使用 ...