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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 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实例分享之mysql数据备份
2014/05/19 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
JavaScript中this详解
2015/09/01 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python读写Redis数据库操作示例
2014/03/18 Python
Python中用于计算对数的log()方法
2015/05/15 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
jupyter notebook 重装教程
2020/04/16 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
python 元组和列表的区别
2020/12/30 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
医学生职业规划范文
2014/01/05 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Python实现日志实时监测的示例详解
2022/04/06 Python