CSS empty-cells with table header - html

Question

I have an HTML table and I want to hide a column if all the tds of the column are empty.
I used following css:
td.actor-custom-settings {
empty-cells: hide;
}
But it doesn't work becuase I have a header for this column.
<tr>
<th>Name</th>
<th class="actor-custom-settings"></th>
</tr>
Now I am using render-time algorithm to determine if there is no data in this column:
#if (Model.Config.Custom.Actors.All(x => x.CustomSettings.Count == 0))
{
<style>
.actor-custom-settings {
display: none
}
</style>
}
Entire generation code (for a reference, it's quite irrelevant for a question):
<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>
But I'm wondering if there is a pure CSS solution.

Answer 1

If I'm understading you correctly, then you simply need to edit your CSS rule to add a second selector to target the th elements with the .actor-custom-settings class and hide them if they're empty:
th.actor-custom-settings,td.actor-custom-settings{
empty-cells:hide;
}
Or you can simplify it to a single class selector:
.actor-custom-settings{
empty-cells:hide;
}