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 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
javascript比较文档位置
2008/04/08 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
vue实现购物车加减
2020/05/30 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
Python读取图片属性信息的实现方法
2016/09/11 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Python随机读取文件实现实例
2017/05/25 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
四年级数学教学反思
2014/02/02 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
毕业证明书
2015/06/19 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书