是否有任何理由不能在< tr>旁边放置边框?在使用CSS的html表格中 [英] Is there any reason you can't put a border around a <tr> in an html table using CSS
问题描述
在CSS中,我有:
.underRow {
border-bottom-color:#7a26b9;
border-bottom-style:solid;
border-bottom-width:1px;
}
但行边界似乎没有任何变化。如果我将类属性向下移动到td,它可以正常工作(但问题是我在中间填充了单元格之间的空间,我想避免这个空间,并在该行下面有一条直线。 / p>
将CSS边框属性放在行(tr)元素上有什么不妥?
.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 $ c $您可以显示更多的代码。
根据您的编辑:
/ strong>
(但问题是我在中间填充
的单元格之间有一个空格。我想避免这个空间,并在行下面有一条直的
行。
听起来像你一定需要 border-collapse
您应该将它添加到表的样式
。
以下是关于它的更多信息: http://www.the-art-of-web.com/css/bordercollapse/
编辑2
基于新的代码和以下评论:
问题是如果我使用:border-collapse:collapse,那么
border-radius样式不起作用了
我在猜测你需要这样的东西
.quantityTable {
border-radius:15px 15px 15px 15px;
背景颜色:#d6b4E1;
margin-bottom:5px;
宽度:100%;
}
.underRow {
border-bottom-color:#7a26b9;
border-bottom-style:solid;
border-bottom-width:1px;
}
.underRow:最后一个孩子{
border-bottom:none;
}
.underRow td {
padding:15px;
}
示例:http://jsfiddle.net/jasongennaro/qCzrg/1/
注意
-
我将半径设得更大,以便您可以更轻松地看到它。
我也从表格中删除了边框
I have a table and I have a tr with a class set to "underRow".
In CSS I have:
.underRow {
border-bottom-color: #7a26b9;
border-bottom-style: solid;
border-bottom-width: 1px;
}
but the row border doesn't seem to be changing at all. If I move the class attribute down to the td's it works fine (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.
Is there anything wrong with putting CSS border attributes on a row (tr) element?
Here is the rest of the CSS on this table for reference:
.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;
}
No it should work.
See this: http://jsfiddle.net/jasongennaro/qCzrg/
Perhaps you need to collapse your borders with
border-collapse:collapse
Or maybe other styles for the TD
is overriding
Can you show some more code.
As per your edit:
(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.
Sounds like you definitely need border-collapse
You should add it to the style of the table
.
Here's a bit more about it: http://www.the-art-of-web.com/css/bordercollapse/
EDIT 2
Based on the new code and the following comment:
the issue is that if i use: border-collapse:collapse then the border-radius styling doesn't work anymore
I am guessing you want something like this
.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;
}
Example: http://jsfiddle.net/jasongennaro/qCzrg/1/
NOTE
I made the radius bigger so you could see it easier.
I also removed the border from the table itself
这篇关于是否有任何理由不能在< tr>旁边放置边框?在使用CSS的html表格中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!