How to display a border-bottom only if table cells are not empty (CSS)

Question

Hey there, I've got a Filemaker calculation that generates an HTML page with several tables.

If the calculation results in values for certain fields the result would be

<table>
<tr><td>Example value 1</td></tr>
<tr><td>Example value 2</td></tr>
...
</table>

If the calculation finds no values to be displayed, the result would simply be

<table>
</table>

In the first case, I want to the table to display a border at the bottom (or any other horizontal line); in the second case, I don't want to display a border at the bottom.

I cannot find a way to get this done using a CSS...

Thanks in adavance :-)

Answer 1

Easy using javascript, but if it has to be css only, what about using the tag to place your border on?

<table>
    <tr><td>Example value 1</td></tr>
    <tr><td>Example value 2</td></tr>
    ...
    <tfoot></tfoot>
</table>

Example here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody

Answer 2

You can get as close as possible with this, given you can't change the markup:

table tr:last td { border-bottom: solid 1px blue; }

If you're generating multiple tables you need this (though less-supported):

table tr:last-child td { border-bottom: solid 1px blue; }

No guarantees on IE6 though.

However, I strongly suggest you don't generate an empty table if you can avoid it, it's invalid HTML. If you did this your CSS gets simpler as well, just giving table this:

table { border-bottom: solid 1px blue; }