Vaadin 有表格的CSS，没有边框的空行

我在我的项目中使用Vaadin，目前我有一个问题。这是CSS/HTML问题，我不知道如何修复它

所以情况看起来是这样的：

<table> 
<tr>
    <td location="loc11"></td>
    <td location="loc12"></td>
</tr>
<tr>
    <td location="loc21"></td>
    <td location="loc22"></td>
</tr>
(...) 
</table> 

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

我的HTML结构（CustomLayout）如下所示：

<table> 
<tr>
    <td location="loc11"></td>
    <td location="loc12"></td>
</tr>
<tr>
    <td location="loc21"></td>
    <td location="loc22"></td>
</tr>
(...) 
</table> 

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

问题是：

如果td是空的，我的边界完全破坏了我的布局。 有没有人能给我一些CSS（在IE7+中也能用）来解决这个问题？ 我不想使用JS，所以我不确定我是否只能用CSS来处理这个问题

Thx

---

tzim

只有使用CSS时，才能使用

空单元格：隐藏
属性。它在浏览器之间有缺陷，所以需要进行一些预览（在IE7中从IEtester呈现为ok-我只需将边框定义为#ccc而不是灰色）

示例：
仅使用CSS时，您可以使用
空单元格：隐藏
属性。它在浏览器之间有缺陷，所以需要进行一些预览（在IE7中从IEtester呈现为ok-我只需将边框定义为#ccc而不是灰色）

示例：
尝试添加：

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

但是在IE8中必须有一个
！DOCTYPE
定义。
尝试添加：

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

但是在IE8中必须有一个
！DOCTYPE
定义