酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【阿里云】采购季上云仅¥223/3年

实现HTML table表格边框方法

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-10-14
本篇文章主要介绍了实现HTML table表格边框方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

一、总体思路:

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>

二、效果图


版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:

相关文章

  • 详解HTML5 HTMLCollection和NodeList的区别

    详解HTML5 HTMLCollection和NodeList的区别

    获取 HTMLCollection 对象 getElementsByTagName() 方法返HTMLCollection对象。 HTMLCollection 对象类似包含 HTML 元素的一个数组。 注意: HTMLCollection 不是一个数组! HTMLCollection 看起来可能是一个数组,但其实不是。 你可以像......
    05-01
  • canvas绘制太极图的实现

    canvas绘制太极图的实现

    看到了很多人写的太极图案,自己也来搞一下,今天就来介绍一下 css样式代码 .animation{ width: 800px; height: 800px; border: 1px solid #000;}#canvas{ animation: rotate 6s linear infinite; }/* 给太极图设置旋转动画 */@keyframes......
    05-01
  • html5中使用hotcss.js实现手机端自适配

    html5中使用hotcss.js实现手机端自适配

    Html5页面在手机端做自适配是很常见的技术需求,下面介绍下在html页面使用hotcss 简介 使用动态的HTML根字体大小和动态的viewport scale。 遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下,让你的页面看起来是一样的。 1.......
    04-25
  • 详解HTML中meta标签及Keywords

    详解HTML中meta标签及Keywords

    关键字 meta(标签)及 Keywords(关键词),曾经在网页中很重要的,但现在已经被很多搜索引擎完全忽略。但是,如果加上这个标签也对网页的综合表现没有坏处,不过,如果使用不恰当的话,对网页非但没有好处,还有欺诈的嫌疑。 键字标签K......
    04-21
  • 移动端h5页面根据屏幕适配的四种方案总结!

    移动端h5页面根据屏幕适配的四种方案总结!

    方法一:引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案: https://github.com/amfe/lib-flexible (此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-width始......
    04-21
  • html5 canvas实现光线沿不规则路径运动的代码

    html5 canvas实现光线沿不规则路径运动的代码

    svg让动画沿着不规则路径运动 查阅svg文档后发现,svg动画运动有两种实现方式,且都非常简单,但对于100%实现设计师给出的效果有很大的距离 使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走 !DOCTYPE html html he......
    04-21
  • HTML5使用可选样式表为网站或应用添加黑暗模式

    HTML5使用可选样式表为网站或应用添加黑暗模式

    为你的站点添加黑暗模式 黑暗模式 已经应用在了许多流行的网站和应用程序中,诸如 Twitter、Instagram、WhatsApp 和 YouTube 等。但是你该怎样在自己的网站上添加这种模式呢? 我一直非常喜欢动态的网站颜色主题切换器。它们可以让你选择......
    04-07
  • html5给汉字加拼音加进度条的实现

    html5给汉字加拼音加进度条的实现

    一、给汉字加拼音 rubyrt demo一眼便知: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 !DOCTYPE html html head meta charset = utf-8 / title / title / head body style = position: relative;margin: 0 auto; margin-top: 100px;text-align: cen......
    04-07
  • canvas绘制树形结构可视图形

    canvas绘制树形结构可视图形

    如下图,最近项目中需要这么个树形结构可视化数据图形,找了好多可视化插件,没有找到可用的,所以就自己画了一个,代码如下。 树形分支是后端接口返回数据渲染,可展示多条; 代码可拓展,可封装; 点击节点可查看备注; canvas id=canv......
    04-03
  • html5图片预加载的实现代码

    html5图片预加载的实现代码

    在HTML5中,我们可以使用drawImage方法在canvas上进行画图操作,其基本代码如下: ? 1 2 3 4 5 var canvas = document.getElementById( canvas ); var context = canvas.getContext( 2d ); var image = new Image(); image.src = images/......
    03-26

最新更新