Css如何给Table下的行tr设置下边框
如下图所示,网页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设置下边框一样的效果。