How to display a border-bottom only if table cells are not empty (CSS)
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 :-)
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; }
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
精彩评论