CSS: how do I have a border-bottom on table rows, except for the last row

Question

I have a variable number of table rows (n), and I would like the border bottom to apply to rows 0..(n-1)

how do I do that?

Answer 1

You have two options: (1) adding a specialized class in the HTML to the last row; or (2) using the :last-child pseudo class in your CSS.

Option 1: Specialized Class

If you can apply classes to your HTML, you can add a specialized class to the final row. If your markup is being generated by a server-side script (eg. a PHP script), you will need to edit that script to add similar markup.

HTML:

<table>    <tr>       <td>       </td>    </tr>    <tr>       <td>       </td>    </tr>    <tr class="last">       <td>       </td>    </tr> </table> 

CSS:

table {    border-collapse:collapse; } tr {    border-bottom: 1px solid #000; } tr.last {    border-bottom: none; } 

Option 2: CSS Pseudo Class

The alternative is to use the :last-child CSS pseudo class. Using the :last-child class doesn't require any changes to the HTML and so may be a better choice if you aren't able to change the HTML. The CSS is almost identical to the above:

CSS:

table {    border-collapse:collapse; } tr {    border-bottom: 1px solid #000; } tr:last-child {    border-bottom: none; } 

The drawback of this approach is that versions of Internet Explorer before 9 don't support the :last-child pseudo class.

Answer 2

I know this is an old question, but it's worth mentioning that now with CSS3 all you have to do is us the not() selector in your CSS, like this:

tr:not(:last-child) {     border-bottom: 1px solid #E3E3E3; }