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实现的几个小loading效果
Sep 27 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 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
改进的IP计数器
2006/10/09 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
python实现图片识别汽车功能
2018/11/30 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Python List cmp()知识点总结
2019/02/18 Python
Python列表的切片实例讲解
2019/08/20 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
大学生入党自我鉴定
2013/10/31 职场文书
踏青活动策划方案
2014/08/19 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
初婚未育证明样本
2015/06/18 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
2016国培学习心得体会
2016/01/08 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android