Is there any reason you can't put a border around a <tr> in an html table using CSS

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: so开发者_如何学运维lid;
}

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

1. I made the radius bigger so you could see it easier.

2. I also removed the border from the table itself

Some versions of some browsers don't take kindly to setting border styles on tr elements.

You can always set them on their tds instead.

.underRow td {
    border-bottom: 1px solid #7a26b9;
}

If there is border spacing you may need to collapse your table borders using border-collapse: collapse;.