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 3D制作实战案例分析
Sep 18 HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 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递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
Redis构建分布式锁
2017/03/28 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
JsChart组件使用详解
2018/03/04 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
js逆向解密之网络爬虫
2019/05/30 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
Java面向对象面试题
2016/12/26 面试题
周年庆典邀请函范文
2014/01/23 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
nginx内存池源码解析
2021/11/20 Servers