用css隐藏空表（带空格）答案

【问题标题】：Hide empty table (with whitespace) with css用css隐藏空表（带空格）
【发布时间】：2019-09-25 05:33:23
【问题描述】：

我正在使用 Blade 为一些表格填充内容，但在某些情况下，表格可能会在没有内容可填充时为空。

这里是php/blade模板的一部分：

<table class="table">
    @isset ($content->client)
    <tr>
        <td>
            Client:
        </td>
        <td class="text-right">
            {{ $content->client }}
        </td>
    </tr>
    @endisset
    @isset ($content->published)
    <tr>
        <td>
            Published:
        </td>
        <td class="text-right">
            {{ $content->published }}
        </td>
    </tr>
    @endisset
</table>

如果未设置 $content->client 和 $content->published，结果类似于：

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

在这些情况下，是否有一种简单的 css 方法可以完全删除表格？我熟悉 :empty 选择器，但如果标签中有空格，显然它不起作用:(

【问题讨论】：

也许如果 isset 对于您的任何行条件为真，使用它来输出开始和结束表标签？
@AndyClarke 这是一个解决方案，但不幸的是在实际代码中还有很多属性需要检查。如果没有像样的 css 解决方案，我可能不得不走那条路。
@ArnovanOordt 不，遗憾的是目前不可能，您必须使用 PHP 或 JS。但未来还是有希望的：CSS4 将引入 :blank 正是这样做的，但截至今天 css-tricks.com/almanac/selectors/b/blank 和 developer.mozilla.org/en-US/docs/Web/CSS/:blank 的任何浏览器都不支持它

标签： html css html-table laravel-blade

【解决方案1】：

如果任何一个变量为空，我建议不要打印表格。

<?php  
if( isset($content->client) || isset($content->published))
{
//    echo table
}
?>

【讨论】：

【解决方案2】：

你试过:blank吗？它还会选择空格，而 :empty 不会。

【讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/:blank 不受任何浏览器支持