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 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
CSS的calc函数用法小结
Jun 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
python爬取m3u8连接的视频
2018/02/28 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
django列表筛选功能的实现代码
2020/03/27 Python
python使用建议与技巧分享(二)
2020/08/17 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
python3判断IP地址的方法
2021/03/04 Python
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
安全资料员岗位职责
2013/12/14 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
劳动模范获奖感言
2015/07/31 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript