加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – CSS表 – 添加边距列和行边框底部

发布时间:2020-12-14 22:37:58 所属栏目:资源 来源:网络整理
导读:我有一个HTML表格元素,我试图在列之间添加边距,所以我使用了那些css属性: table { border-collapse: separate; border-spacing: 36px 0px;} 现在我想在标题和正文中的每个tr中添加border-bottom到整行,但边框不会出现. 我用了: tr { border-bottom: 1px so

我有一个HTML表格元素,我试图在列之间添加边距,所以我使用了那些css属性:

table {
 border-collapse: separate;
 border-spacing: 36px 0px;
}

现在我想在标题和正文中的每个tr中添加border-bottom到整行,但边框不会出现.
我用了:

tr {
 border-bottom: 1px solid blue;
}

它只在我使用时出现:

table {
 border-collapse: collapse;
}

但是我不会在列之间留有余量.

我加了我的DEMO here.

最佳答案
您可以使用:在伪类之后对其进行样式设置,如下所示:

body {
  background: #eee;
}

.mytable{
  border-collapse: separate;
  background-color: white;
  border-spacing: 36px 0px;
  position: relative;
  overflow: hidden;
}

.mytable td,.mytable th {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.mytable th:after,.mytable td:after {
  position: absolute;
  background: blue;
  margin-top: 18px;
  content: '';
  height: 1px;
  right: 0;
  left: 0;
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!