2

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

数据是动态添加到表格中的，因此可能会出现表格中没有数据（没有trs）但由于边框间距属性（当前为 ）而存在一些垂直空白的情况border-spacing: 0px 10px。

有没有可能通过 CSS 解决这个问题？

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

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

我提到预期的功能是在表格中没有数据时根本不显示表格。

编辑：在 Chrome 上测试。

4

3 回答 3

1

您可以使用 CSS:empty伪，而不是使用display: none;

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

演示（display: block;那里不需要）

仍然有一个小黑点，这是因为你的表格元素的边框，因为到目前为止还没有办法使用 CSS 选择父元素，如果不使用 jQuery，你不能通过选择父元素并应用来消除它border: 0;

于 2013-08-12T13:00:59.820 回答
0

像这样

演示

table {
    border-collapse:collapse;
}
于 2013-08-12T12:48:04.910 回答
0

CSS 无法知道选择器是否有内容。由于您是动态添加它，如果没有数据存在，则将一个类添加到表中。就像是：

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

然后，在您的 CSS 中，添加：

table.empty {
  display:none;
}

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

$(document).ready(function() {
  if ($('table tr').length == 0) {
    $('table').addClass('empty');
  }
});
于 2013-08-12T12:50:45.237 回答