一、总体思路:

  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. 01_搭建基本的FTP服务器(数通华为)

    1.选择客户端和服务端: 2.FTP服务端配置设置待FTP的文件: 3.客户端配置访问: 4.双击下载到本地:

  2. 分享一个Centos8的国内yum源

    使用的是清华大学开源镜像站,文件地址: https://github.com/hackyoMa/docker-centos/blob/8/CentOS-Base.repo 使用方法: cd /etc/ ...

  3. Sublime Text 3关闭自动升级提醒

    由于种种原因,导致不想升级现有版本的ST3,但是被它的升级提醒弹窗严重骚扰! ||||||||||| 解 决 办 法 ||||||||||| 1.首选项 - 设置 - 用户(快捷键 ❀,)打开“Pre ...

  4. 反素数 Antiprime(信息学奥赛一本通 1625)(洛谷 1463)

    题目描述 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数1,2,4,6 ...

  5. MVC方法返回值数据

    ModelAndView的作用以及用法 使用ModelAndView类用来存储处理完后的结果数据,以及显示该数据的视图.从名字上看ModelAndView中的Model代表模型,View代表视图,这个 ...

  6. Swagger-BootStrap-UI生成的接口文档如何加Basic校验

    首先我们来看看swagger-bootstrap-ui的效果,如图所示: 看起来是不是比Swagger要大气的多. 回到重点上,为什么要给接口文档加密呢? 只对内开放,不对外开放,防止被第三方非公司人 ...

  7. FFmpeg 被声明为已否决 deprecated(2018 精)

    不用再取消SDL检查,不用再添加#pragma warning(disable :4996),下面才是正确的解决方法!! 以下是一些常见的deprecated问题,遇到下述没有列出的问题,可以打开相应 ...

  8. Java虚拟机解释器与JIT编译器

    一.JAVA编译相关概念 1.动态编译(dynamic compilation)指的是“在运行时进行编译”:与之相对的是事前编译(ahead-of-time compilation,简称AOT),也叫 ...

  9. ASP.NET Core中的Startup

    原文:链接 Startup.cs的作用: 配置各服务和HTTP请求管道. Startup类: ASP.NET Core中使用按惯例Startup命名的类Startup.cs: (可选)包括Config ...

  10. 使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤

    安装配置 VSCode [1]安装 VSCode: 下载地址:https://code.visualstudio.com/ 根据自己电脑对应的操作系统下载对应的版本即可,至于安装过程也和一般的软件一样 ...