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发光搜索表单分享
Apr 11 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 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
通过html表格发电子邮件
2006/10/09 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP SOCKET编程详解
2015/05/22 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
利用python将图片转换成excel文档格式
2017/12/30 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
劳资专员岗位职责
2013/12/27 职场文书
省文明单位申报材料
2014/05/08 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
旷课检讨书范文
2015/01/27 职场文书
少年雷锋观后感
2015/06/10 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python