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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 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
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
jsonp原理及使用
2013/10/28 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
草莓网官网:StrawberryNET
2019/08/21 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
竞选演讲稿范文
2013/12/28 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
丑小鸭教学反思
2014/02/03 职场文书
挂职自我鉴定
2014/02/26 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
python实现网络五子棋
2021/04/11 Python
Python实现自动玩连连看的脚本分享
2022/04/04 Python