html - 带有表格标题的 CSS 空单元格

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;
}