带表的CSS，没有边框的空行

Question

我在我的项目中使用Vaadin，目前我遇到了问题。这是CSS / HTML问题，我不知道如何解决它......

所以情况看起来像这样：

我有HTML结构（CustomLayout），看起来像这样：

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

我正在将数据插入到位置=“xxx”的td中，数据在某些位置并不是每个人。 CSS看起来像这样：

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

这就是问题所在：

如果td为空，我的边框会完全破坏我的布局。 有人可以给我一些CSS（也可以在IE 7+中工作）来解决这个问题吗？ 我不想使用JS，所以我不确定我是否可以只使用CSS处理这个问题？

THX tzim

Answer 1

尝试添加：

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

但在IE8中必须有!DOCTYPE定义。

Answer 2

只有CSS才能使用empty-cells:hide属性。这是跨浏览器的错误，所以在所有的预览中都做了一些预测（在我的IE7中从IEtester渲染好了 - 我只需要将边框定义为#ccc而不是灰色）

示例：http://jsfiddle.net/EbvXQ/11/