CSS with tables, empty rows without border

I use Vaadin in my project, currently i'm having a problem with it. It's CSS/HTML problem and i'm not aware how can i fix it...

So the situation looks like that:

I've got HTML structure (CustomLayout) which looks like that:

<table> 
<tr>
    <td location="loc11"></td>
    <td location="loc12">开发者_开发知识库</td>
</tr>
<tr>
    <td location="loc21"></td>
    <td location="loc22"></td>
</tr>
(...) 
</table> 

I'm inserting data into td with location="xxx", the data is in some locations not everyone. CSS looks like that:

table.metric_table_layout tr td {
 border-bottom: 1px dotted grey !important;
}

And here's the problem:

If the td is empty, i have borders that completly ruined my layout. Could someone give me some CSS (that will works also in IE 7+) to fix this ? I don't want to use JS, so i'm not sure if i can handle this with only CSS?

Thx tzim

Try to add:

table.metric_table_layout {
    border-collapse:separate;
    empty-cells:hide;
}

But in IE8 there has to be a !DOCTYPE definition.

With CSS only you can use the empty-cells:hide property. It's buggy across browsers so do some previews in all (rendered ok in my IE7 from IEtester - I just had to define the border as #ccc instead of gray)

Sample: http://jsfiddle.net/EbvXQ/11/