Css如何给Table下的行tr设置下边框

overme3个月前 (10-17)网页设计230

如下图所示,网页HTML代码中使用是table tr,如何使用Css给每行tr设置下边框呢!

有时候有设置tr边框的需求,写下如下css

开始小编按以往Css的书写方法,尝试写了如下CSS代码:

.website tr{
border-bottom: 1px dashed red;
}

上传服务器后,不起作用,还以为是缓存导致没有更新,清除了服务器和浏览器缓存后,仍然得不到效果。后来在网上查询了资料,只有table,th和td有独立的边框,tr并无边框。

那该如何给每行添加下边框呢,提供几种解决方法:

1、重构网页元素,通过Div块状元素来替代tr行。然后给div设置下边框

2、将table的border-collapse设置为collapse,将table,th和td的边框合成单一的边框,此时给tr设置边框就可以生效了。

table{
border-collapse: collapse;
}

tr{
border-bottom: 1px dashed red;
}

3、table标签里面将cellspacing设置为0,<table cellspacing=”0″>

然后在Css中给td设置下边框。
td{
border-bottom: 1px dashed red;
}

cellspacing设置为0,代表的是table中td与td之间的间隔为0,这样的话通过td设置下边框就可以实现看上去像tr设置下边框一样的效果。

相关文章


		如何解决Css Z-index不生效的问题

如何解决Css Z-index不生效的问题

说来挺简单的一个事,小编硬是鼓捣了小一个上午,才解决这个问题。想着怕以后再遇到,也是为了给广大自学爱好者分享经验,就在此分享z-index不生效的解决方法: 现象:如图两个相邻的元素,想要后一个元...

如何使用CSS实现前后两个元素位置交换

如摘要所述,PC端左右布局的HTML元素,在手机移动端显示时,分别按Width 100%显示,结果展示的是前后的效果。 想要交换两个元素的显示顺序,在此分享实现方法: 首先,想要单独控制html...

使用 css-scope-in​​line 确定 CSS 内联样式的范围

内联标签提供了现代HTML样式模式,但这种机制在普通 CSS 和 HTML 中存在一个已知的范围问题:传统标签通常需要放置在 head 标签内,因此特定标签内的所有样式规则都会影响整个 HTML 页...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。