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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python爬虫实例详解
2018/06/19 Python
Python Grid使用和布局详解
2018/06/30 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
详解python中*号的用法
2019/10/21 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
客户经理岗位职责
2013/12/08 职场文书
社会学专业求职信
2014/02/24 职场文书
单位委托书范本
2014/04/04 职场文书
公证书标准格式
2014/04/10 职场文书
对教师的评语
2014/04/28 职场文书
公司募捐倡议书
2014/05/14 职场文书
垃圾桶标语
2014/06/24 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2014年纪检工作总结
2014/11/12 职场文书
先进班组材料范文
2014/12/25 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript