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

Question

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

所以情况看起来像这样：

我有 HTML 结构（自定义布局），看起来像这样：

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

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

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

这就是问题：

如果 td 为空，则我的边框完全正确毁了我的布局。 有人可以给我一些 CSS（也适用于 IE 7+）来解决这个问题吗？ 我不想使用 JS，所以我不确定是否可以仅使用 CSS 来处理这个问题？

谢谢 齐姆

Answer 1

尝试添加：

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

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

Answer 2

仅通过 CSS，您可以使用 empty-cells:hide 属性。它在浏览器中存在错误，因此需要进行一些预览（在 IEtester 的 IE7 中渲染正常 - 我只需将边框定义为 #ccc 而不是灰色）

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