HTML table 表格边框的实现思路


Posted in HTML / CSS onOctober 12, 2019

一、总体思路:

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 表格边框的实现思路

总结

以上所述是小编给大家介绍的HTML table 表格边框的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
Html5自定义字体解决方法
Oct 09 #HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 #HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 #HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 #HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 #HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 #HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 #HTML / CSS
You might like
PHP的FTP学习(二)
2006/10/09 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python绘制简单彩虹图
2018/11/19 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
小学语文国培感言
2014/03/04 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
单位作风建设自查报告
2014/10/23 职场文书
三好学生评语大全
2014/12/29 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
开业庆典致辞
2015/08/01 职场文书
给校长的建议书范文
2015/09/14 职场文书
导游词之岳阳楼
2019/09/25 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android