OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色


分享到


分类 编程技巧   关键字 前端   发布 ourjs  1539603646707
注意 转载须保留原文链接,译文链接,作者译者等信息。  

去掉单元隔间隔


单元隔间隔对应table标签上的 cellpadding 和 cellspacing,这里可以用CSS实现,cellpadding 对应 td 的 padding。 去除边框 cellspacing 的间隔有以下两种方法:

方法一:  border-collapse: collapse

border-collapse 默认值为separate,即每个td单元格都有独立的边框;collapse表示相邻单元格共用一个边框,此时 border-spacing 将不起作用,设置为collapse单元格间距将消失。

table {
    border-collapse: collapse;
}

table tr td {
    border: solid 2px #222;
}

方法二: 设置 border-spacing: 0

此时边框间隔为0,看上去像是被合并了,但每个td都会有两个边框,相邻td边框会比最左/最右的不邻td的边框厚2倍,为了使单元格边框宽度一致需要特殊处理:

table {
    border-spacing: 0;
    border-bottom: solid 2px #222;
    border-right: solid 2px #222;
}

table tr td {
    border-top: solid 2px #222;
    border-left: solid 2px #222;
}

隔行显示不同背景颜色


可使用nth-child伪类实现,参数分为odd(奇数行)和 even(偶数行),只需复写一个即可

table tr {
    background: #fff;
}

table tr:nth-child(even) {
    background: #ccc;
}


完整示例  https://jsbin.com/yovunum/edit?html,css,output

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. JavaScript运算出现很多小数导致运算不精确的问题,用toFixed解决
  2. Linux上为git无交互添加最低权限的使用用户
  3. 为jquery的ajax请求添加超时timeout时间
  4. 使用Node.JS批量查找替换目录下文本文件中图片地址内容
  5. Redis/Python被要求更改Master/Slave程序接口名称和描述
  6. 用JavaScript测试图像上两点之间的距离
  7. 判断Node.JS TCP Socket当前连接状态
  8. 用纯CSS改变html radio/checkbox默认背景颜色样式
  9. 用JavaScript实现basename获取路径中的文件名
  10. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - 编程技巧
  1. css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色
  2. 用纯CSS改变html radio/checkbox默认背景颜色样式
  3. Node.JS命令行或批处理中更改Linux用户密码
  4. 用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
  5. 用css禁用input、checkbox、select等html控件,实现disable效果
  6. 让Select选择框可编辑可输入可自动补全可下拉选择
  7. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  8. Node.js框架之express
  9. 纽约时报使用Html5 WebRTC记录访问者IP地址
  10. 在Debian/Ubuntu上面安装升级nginx到最新版

 关键字 - 前端
  1. css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色
  2. 用JavaScript实现basename获取路径中的文件名
  3. 用纯CSS改变html radio/checkbox默认背景颜色样式
  4. CSS垂直水平完全居中手册
  5. 15个最好的HTML5前端响应式框架(2014)
  6. 我被问得最多的十个JavaScript前端面试问题
  7. 5个经典的前端面试问题
  8. 超简易——Bootstrap可关闭tab标签页
  9. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  10. 用css禁用input、checkbox、select等html控件,实现disable效果

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号