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轻松实现圆角效果
Nov 09 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
php实现文件下载代码分享
2014/08/19 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
javascript克隆对象深度介绍
2012/11/20 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python如何读取MySQL数据库表数据
2017/03/11 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python版学生管理系统
2018/01/10 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
物业管理毕业生个人的求职信
2013/11/30 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
给市场的环保建议书
2014/05/14 职场文书
企业人事任命书
2014/06/05 职场文书
课外活动总结范文
2014/07/09 职场文书
春晚观后感
2015/06/11 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python