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旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 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
简化php模板页面中分页代码的解析
2009/02/06 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
angularjs基础教程
2014/12/25 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
护理学专业推荐信
2013/12/03 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
团代会主持词
2014/04/02 职场文书
新农村建设典型材料
2014/05/31 职场文书
大学计划书范文800字
2014/08/14 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
采购员岗位职责
2015/02/03 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers