How to change last table's <tr> border color

Question

I have a basic table with some rows. Each row has a border-bottom of 2px, but I would like the last not to have any bottom at all. However, I do not seem to manage to do this with my current code.

<table id="products">
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr class="productsBottom"></tr>
</table>

This is my CSS:

#products tr {
    height: 94px;
    border-bottom: 2px solid #e5e5e5;
}

tr.productsBottom {
    border-bottom: 0px solid;
}

Any help on this? I don't seem to understand why it works when I add a background-color, but changing the border in any way doesn't seem to do anything?

Answer 1

You need to set border-bottom to 'none', you can also select the last row directly without needing to assign it a class, using the :last-child selector

#products tr:last-child{
    border-bottom:none;
}

You may also want to add:

#products{
    border-collapse:collapse;
}

Answer 2

The first selector in your css has greater specificity, hence it'll override the second one were you're setting the border to zero.

You can avoid this by using !important keyword or a more specific selector like

#products tr.productsBottom {
   border-bottom: 0px solid;
}

Answer 3

This is down to css specificity. The #products tr selector is most specific, so is the one that is applied. To increase the specificity of the later selecter use:

#products tr.productsBottom {
    border-bottom: 0px solid;
}