我有一个表,我有一个类设置为“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;
}
最佳答案
不,它应该工作.
原文链接：https://www.f2er.com/html/426543.html见：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/
注意
>我把半径做得更大,这样你就可以更容易地看到它.
>我也从表格中删除了边框
