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

Question

我遇到与表格中的垂直空白有关的问题。我正在使用border-spacing CSS属性在表行之间添加一些空格（以使它们看起来不那么紧凑）。

数据是在表中动态添加的，因此可能存在表格中没有数据的情况（没有tr s）但是由于border-spacing属性存在一些垂直空白（目前是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 */
}

Demo（那里不需要display: block;）

仍然是一个小黑点，这是因为你的表元素的边框，因为现在没办法用CSS选择父元素，你不能通过选择父元素和不使用jQuery来消除它。应用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');
  }
});