当表中没有数据时，删除边框间距

Question

我有一个与表中的垂直空白有关的问题。 我正在使用border-spacing CSS属性在表行之间添加一些空间（以使它们看起来不太拥挤）。

数据是动态添加到表中的，因此可能出现以下情况：表中没有数据（没有tr s），但是由于border-spacing属性（当前为border-spacing: 0px 10px所以存在一些垂直空白） border-spacing: 0px 10px ）。

是否有可能通过CSS修复此问题？

带有数据的小提琴示例： http : //jsfiddle.net/lav911/QLsah/

没有数据的小提琴示例： http : //jsfiddle.net/lav911/yWRS7/

我提到过，预期的功能将是在其中没有数据时完全不显示该表。

编辑：在Chrome上测试。

Answer 1

您可以使用CSS :empty伪，然后使用display: none;

table tbody:empty {
   display: none; /* Than get rid of it */
}

演示 （无display: block;必填）

仍然存在一个小黑点，这是由于表格元素的边框所致，因为到目前为止无法使用CSS选择父元素，因此如果不使用jQuery，就无法通过选择父元素并应用border: 0;来消除这种情况border: 0;

Answer 2

像这样

DEMO

table {
    border-collapse:collapse;
}

Answer 3

CSS无法知道选择器是否包含内容。 由于您是动态添加的，因此如果没有数据，则向表中添加一个类。 就像是：

<table class="empty"></table>

然后在您的CSS中添加：

table.empty {
  display:none;
}

由于您使用的框架可能是可编辑的，因此可能无法添加，因此可以添加此JS（使用jQuery）：

$(document).ready(function() {
  if ($('table tr').length == 0) {
    $('table').addClass('empty');
  }
});