开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜