html - 有什么理由不能使用 CSS 在 html 表格中的 <tr> 周围放置边框

Question

我有一个表和一个类设置为“underRow”的 tr。

在 CSS 中我有:

.underRow {
 border-bottom-color: #7a26b9;
 border-bottom-style: solid;
 border-bottom-width: 1px;
}

但行边框似乎根本没有变化。如果我将类属性向下移动到 td's 它工作正常(但问题是我在单元格之间填充的中间有一个空间。我想避免这个空间并在行下方有一条直线。

将 CSS 边框属性放在行 (tr) 元素上有什么问题吗？

这是此表中其余的 CSS 以供引用:

.quantityTable {
    border-radius: 5px 5px 5px 5px;
    background-color: #d6b4E1;
    padding: 5px;
    margin-bottom: 5px;
    width: 100%;
    border-width: 2px;
    border-color: #7a26b9;
    border-style: solid;
}

Answer 1

不，它应该有效。

看这个:http://jsfiddle.net/jasongennaro/qCzrg/

也许你需要折叠你的边框

border-collapse:collapse

或者 TD 的其他样式可能会被覆盖

你能再展示一些代码吗？

根据您的编辑:

(but the issue is that i get a space in the middle where the padding is between the cells. I want to avoid this space and have one straight line below the row.

听起来你肯定需要 border-collapse

你应该把它添加到table的样式中。

这里有更多关于它的信息:http://www.the-art-of-web.com/css/bordercollapse/

编辑 2

基于新代码和以下注释:

the issue is that if i use: border-collapse:collapse then the border-radius styling doesn't work anymore

我猜你想要这样的东西

.quantityTable{
    border-radius: 15px 15px 15px 15px;
    background-color: #d6b4E1;
    margin-bottom: 5px;
    width: 100%;    
}

.underRow{
    border-bottom-color: #7a26b9;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.underRow:last-child{
    border-bottom:none;
}

.underRow td{
    padding: 15px;  
}

示例:http://jsfiddle.net/jasongennaro/qCzrg/1/

注意

1. 我把半径变大了，这样你就更容易看到了。

2. 我还删除了表格本身的边框