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 相关文章推荐
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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仿ZOL分页类代码
2008/10/02 PHP
在JavaScript中调用php程序
2009/03/09 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
JS分页效果示例
2013/10/11 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
使用Python读取大文件的方法
2018/02/11 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
如何写你的创业计划书
2014/01/07 职场文书
英语故事演讲稿
2014/04/29 职场文书
处级干部考察材料
2014/12/24 职场文书
营业员岗位职责范本
2015/04/14 职场文书
结婚司仪主持词
2015/06/29 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
MySQL如何解决幻读问题
2021/08/07 MySQL
关于Redis的主从复制及哨兵问题
2022/06/16 Redis
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android