Question

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

Answer 1

Try to add:

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

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