有什么理由你不能使用CSS在html表中放置一个边框

我有一个表,我有一个类设置为“underRow”的tr.

在CSS我有：

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

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

将CSS边框属性放在row(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;
}

最佳答案

不,它应该工作.

见：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.

听起来你肯定需要边界崩溃

您应该将其添加到表格的样式中.

这里有一点关于它：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/

注意

>我把半径做得更大,这样你就可以更容易地看到它.
>我也从表格中删除了边框