Question

我有一个HTML表格，如果该列的所有td都为空，我想隐藏一列。

我使用了以下css：

td.actor-custom-settings {
    empty-cells: hide;
}

但它并不起作用，因为我有一个标题。

<tr>
    <th>Name</th>
    <th class="actor-custom-settings"></th>
</tr>

现在我使用渲染时算法来确定此列中是否没有数据：

@if (Model.Config.Custom.Actors.All(x => x.CustomSettings.Count == 0))
{
    <style>
        .actor-custom-settings {
            display: none
        }
    </style>
}

整代代码（供参考，它与问题无关）：

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th class="actor-custom-settings">Custom Settings</th>
            <th></th>
        </tr>
    </thead>
    <tbody class="table-body">
        @foreach (var x in Model.Config.Default.Actors)
        {
            <tr>
                <td><input type="text" class="form-control actor-name" value="@x.Name"></td>
                <td class="actor-custom-settings">
                    @if (x.CustomSettings.Count > 0)
                    {
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var pair in x.CustomSettings)
                                {
                                    <tr>
                                        <td class="actor-custom-key">@pair.Key</td>
                                        <td class="actor-custom-value"><input type="text" class="form-control" value="@pair.Value"></td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    }
                </td>
                <td>
                    <button class="btn btn-danger btn-xs table-button-change-state" onclick="deleteTableRow(event)">
                        <i class="fa fa-remove"></i>
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>

但我想知道是否有纯CSS解决方案。

Answer 1

如果我正确地理解您，那么您只需编辑CSS规则以添加第二个选择器以使用th类定位.actor-custom-settings元素，并在它们为空时隐藏它们：

th.actor-custom-settings,td.actor-custom-settings{
    empty-cells:hide;
}

或者您可以将其简化为单个类选择器：

.actor-custom-settings{
    empty-cells:hide;
}

带有表头的CSS空单元

1 个答案: