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


Tags: css

Problem :

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 :-)



Solution :

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; }

    CSS Howto..

    How to load dynamic CSS files based on condition

    How to add padding to a ul/li menu with a background image?

    How to add a CSS style sheet reference to all Web forms in a Visual C# .NET Web project

    How to apply the CSS of navbar-inverse in twitter-bootstrap

    How to expand a div with css

    How can I apply a css transition to an element when its parent is hovered?

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How do I create triangle shaped vertical breadcrumbs

    How to override css property to default?

    HTML/CSS how to temporarily highlight a section of a page [duplicate]

    How can I get jQuery to toggle a class with fadeToggle?

    How do I remove the gap between the header and image slider

    How to design a cross client / browser compatible email?

    How to load self hosted font files if the GoogleFont service is unavailable?

    How to use css to crop parts of an image

    How to close popup

    css: how to put text between two images side by side?

    How to recursively remove CSS classes

    How can I split code-blocks into a list?

    How to show/hide content on click with CSS

    How to mimic Photoshop “Color Overlay” in CSS

    How can i edit font-size and font-family option in css file using sed?

    CSS flexbox: How to get column items to fill height

    How to make content fill space inside
    tag in html?

    How do you use CSS to make a group of images that flow over the edges of the browser window?

    disabling stylesheets to increase the speed of showing/hiding divs

    How can I change input type of Yii CJuiAutoComplete?

    How to change the border of an element when selected?

    How to use css for the hover effect in another div?

    How to toggle css media queries on and off