HTML table 表格边框
一、总体思路:
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 表格边框的更多相关文章
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- CSS 设置TABLE 表格 边框
/*table列表 合并边框设置*/ .tablelist { border-collapse:collapse; } /*table列表 设置边框宽度及颜色*/ .tablelist td { bo ...
- table表格边框样式
; border-left:1px solid #aaa; border-top:1px solid #aaa; } td{border-right:1px solid #aaa; border-bo ...
- table表格设置边框线为单实线
设置table表格边框为单实线的方法有两种 第一种方法就是利用table标签cellspacing=0属性来实现,cellspacing是内边框和外边框的距离,这种方法实现的看起来是单实线,其实是内边 ...
- css如何让表格table的边框为1像素呢
在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...
- html表格table设置边框
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...
- table 表格 细边框 最简单样式
table 表格细边框的效果实现方法虽然不难,但网上简单有效的方法却很少,在此记录一下 css 样式 /** table 细边框 **/ table{border-collapse: collapse ...
- 【丛林】HTML Table 表格浅谈(边框、隔行变色
此例子已经包含本文大部分内容,请对照参考.查看代码 > 定义和用法 table标签定义 HTML 表格. 创建表格的四要素:table.tr.th.td <table> 整个表格以& ...
- element table 表格 修改背景为透明并去除边框
.el-table{ /* 表格字体颜色 */ color:white; /* 表格边框颜色 */ /* border: 0.5px solid #758a99; */ height: 500px; ...
随机推荐
- MongoDB 实现 create table tab2 as select
1. var result = db.foo.aggregate(...);db.bar.insert(result.result); 2. var temp1 = db.mtb1.find(name ...
- diffy 方便的bug 以及流量测试系统
diffy 是twiiter 开源的流量以及bug 查找系统 参考使用图 几点说明 使用diffy我们需要三个角色 candidate instance 候选实例,运行新的代码 primary ins ...
- exlucas易错反思
模板和题解 复习了一下 exlucas的模板,结果写挂四次(都没脸说自己以前写过 是该好好反思一下呢~ 错的原因如下: 第一次WA:求阶乘的时候忘了递归处理(n/p)! 第二次WA:求阶乘时把p当成循 ...
- web前端开发高级
前端高效开发框架技术与应用 Vue 基础Vue 框架简介 MVX 模式介绍Vue 框架概述如何使用 Vue.js 基础语法 实例对象生命周期模板语法计算属性Methods 方法 渲染 列表渲染条件渲染 ...
- 使用 gitstats 来统计代码
使用 gitstats 来统计代码 github地址如下 gitstats clone地址 git clone https://github.com/hoxu/gitstats && ...
- Mongoose 入门以及实现数据的增、删、改、查
mongoose 介绍 Mongoose 是在 node.js 异步环境下对 mongodb 进行便捷操作的对象模型工具.Mongoose 是 NodeJS 的驱动,不能作为其他语言的驱动. Mong ...
- 使用GParted调整ubuntu根目录空间大小
一.背景 Win10系统下安装ubuntu16.04双系统-常见问题解答 由于安装双系统时,ubuntu分区设置如下: 1) 主分区 ext4 / 30720MB 2) 主分区 swap area 8 ...
- IntelliJ IDEA 调试 Apache RocketMQ 源码
克隆源码 mvn clean install 执行命令,跳过测试.我在执行测试的时候有时候卡住,所以干脆就跳过了. mvn clean install -DskipTests 准备环境 在 D 盘创建 ...
- Java手机号隐藏中间4位和邮箱隐藏,身份证隐藏
1.Java代码中隐藏 //隐藏手机号码中间四位 String phoneNumber = "15567893456"; String resultPhone= phoneNumb ...
- mstar gdb调试
当进程崩溃出现coredump提示时,可以利用gdb来定位出错函数. 首先,把core_dump.XXX.gz文件从设备上拷贝出来,放到编译环境下,另外,还要把代码目录下的symbols文件夹也拷贝到 ...