一、总体思路:

  1、表格无边框,背景颜色设置一种颜色(#DCDFE6),这样表格的边框的颜色就是表格的背景颜色;

  2、单元格间距为1px,背景颜色设置为白色(#FFFFFF)

    // CSS
table { background:#DCDFE6; width: 100%; }
table td { background:#FFFFF; } // HTML
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="3"><el-checkbox>仪表面板</el-checkbox></td>
</tr> <tr>
<td rowspan="2"><el-checkbox>渠道管理</el-checkbox></td>
<td><el-checkbox>渠道列表</el-checkbox></td>
<td>
<el-checkbox>新增</el-checkbox>
<el-checkbox>编辑</el-checkbox>
<el-checkbox>删除</el-checkbox>
</td>
</tr>
</table>

二、效果图

HTML table 表格边框的更多相关文章

  1. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  2. CSS 设置TABLE 表格 边框

    /*table列表 合并边框设置*/ .tablelist { border-collapse:collapse; } /*table列表 设置边框宽度及颜色*/ .tablelist td { bo ...

  3. table表格边框样式

    ; border-left:1px solid #aaa; border-top:1px solid #aaa; } td{border-right:1px solid #aaa; border-bo ...

  4. table表格设置边框线为单实线

    设置table表格边框为单实线的方法有两种 第一种方法就是利用table标签cellspacing=0属性来实现,cellspacing是内边框和外边框的距离,这种方法实现的看起来是单实线,其实是内边 ...

  5. css如何让表格table的边框为1像素呢

    在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...

  6. html表格table设置边框

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  7. table 表格 细边框 最简单样式

    table 表格细边框的效果实现方法虽然不难,但网上简单有效的方法却很少,在此记录一下 css 样式 /** table 细边框 **/ table{border-collapse: collapse ...

  8. 【丛林】HTML Table 表格浅谈(边框、隔行变色

    此例子已经包含本文大部分内容,请对照参考.查看代码 > 定义和用法 table标签定义 HTML 表格. 创建表格的四要素:table.tr.th.td <table> 整个表格以& ...

  9. element table 表格 修改背景为透明并去除边框

    .el-table{ /* 表格字体颜色 */ color:white; /* 表格边框颜色 */ /* border: 0.5px solid #758a99; */ height: 500px; ...

随机推荐

  1. MongoDB 实现 create table tab2 as select

    1. var result = db.foo.aggregate(...);db.bar.insert(result.result); 2. var temp1 = db.mtb1.find(name ...

  2. diffy 方便的bug 以及流量测试系统

    diffy 是twiiter 开源的流量以及bug 查找系统 参考使用图 几点说明 使用diffy我们需要三个角色 candidate instance 候选实例,运行新的代码 primary ins ...

  3. exlucas易错反思

    模板和题解 复习了一下 exlucas的模板,结果写挂四次(都没脸说自己以前写过 是该好好反思一下呢~ 错的原因如下: 第一次WA:求阶乘的时候忘了递归处理(n/p)! 第二次WA:求阶乘时把p当成循 ...

  4. web前端开发高级

    前端高效开发框架技术与应用 Vue 基础Vue 框架简介 MVX 模式介绍Vue 框架概述如何使用 Vue.js 基础语法 实例对象生命周期模板语法计算属性Methods 方法 渲染 列表渲染条件渲染 ...

  5. 使用 gitstats 来统计代码

    使用 gitstats 来统计代码 github地址如下 gitstats clone地址 git clone https://github.com/hoxu/gitstats && ...

  6. Mongoose 入门以及实现数据的增、删、改、查

    mongoose 介绍 Mongoose 是在 node.js 异步环境下对 mongodb 进行便捷操作的对象模型工具.Mongoose 是 NodeJS 的驱动,不能作为其他语言的驱动. Mong ...

  7. 使用GParted调整ubuntu根目录空间大小

    一.背景 Win10系统下安装ubuntu16.04双系统-常见问题解答 由于安装双系统时,ubuntu分区设置如下: 1) 主分区 ext4 / 30720MB 2) 主分区 swap area 8 ...

  8. IntelliJ IDEA 调试 Apache RocketMQ 源码

    克隆源码 mvn clean install 执行命令,跳过测试.我在执行测试的时候有时候卡住,所以干脆就跳过了. mvn clean install -DskipTests 准备环境 在 D 盘创建 ...

  9. Java手机号隐藏中间4位和邮箱隐藏,身份证隐藏

    1.Java代码中隐藏 //隐藏手机号码中间四位 String phoneNumber = "15567893456"; String resultPhone= phoneNumb ...

  10. mstar gdb调试

    当进程崩溃出现coredump提示时,可以利用gdb来定位出错函数. 首先,把core_dump.XXX.gz文件从设备上拷贝出来,放到编译环境下,另外,还要把代码目录下的symbols文件夹也拷贝到 ...