CSS: how do I have a border-bottom on table rows, except for the last row
Solution 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.
Solution 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;
}
Solution 3:
tr:last-child td {
border-bottom: none;
}
Saves you putting a class on the last tag.
Solution 4:
this is used with any class call in html
tr:last-child {
border-bottom: none;
}
Solution 5:
You can also use this way
table tr:not(:last-of-type) { border-bottom: none; }