table无法设置tr边框的原因与解决方法

html中table设置tr行边框

由于table中的每个单元格都有独立的边框,即每个td都有自己的边框,而一个tr中包含多个td。如下图所示,各个td中有间隔


image.png

即无法为tr设置边框。
要想为tr设置边框,需将tr中所有的td共享一个边框。
在table样式中加入

border-collapse: collapse;

即将td合并为一个单一的边框,从而可以对tr进行边框设置。
当然可以以在table中设置cellspacing为0,即td之间无间隔,再设置border,各个td之间的边框便可以连接起来,从而也相当于为tr设置了边框。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • table加边框记录 Html中table的属性: border= “1”:给整个表格(包括表格及每一个单元格)加...
    zsanpang阅读 1,879评论 0 2
  • HTML 邮件内容虽然也是 HTML,但是和我们在网页上使用的 HTML 不同,因为安全原因,各大邮箱服务商及邮件...
    思路清奇阅读 2,074评论 0 0
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 1,247评论 0 1
  • 块级元素有 、 、 ,以及列表标签 、 、 、 、 、 行内元素有 、 、以及文本格式化标签 、 、 、 行内块元...
    Imkata阅读 734评论 0 0
  • 题目描述:请写一个表格以及对应的CSS,使表格奇数行为白色背景,偶数行为灰色背景,鼠标移上去时为黄色背景。刷题时看...
    公子七阅读 3,946评论 0 0