title: CSS empty-cells with table header
body: <p>I have an HTML table and I want to hide a column if all the <code>td</code>s of the column are empty.</p>
  
  <p>I used following css:</p>
  
  <pre><code>td.actor-custom-settings {
      empty-cells: hide;
  }
  </code></pre>
  
  <p>But it doesn't work becuase I have a header for this column. </p>
  
  <pre><code>&lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th class="actor-custom-settings"&gt;&lt;/th&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Now I am using render-time algorithm to determine if there is no data in this column:</p>
  
  <pre><code>@if (Model.Config.Custom.Actors.All(x =&gt; x.CustomSettings.Count == 0))
  {
      &lt;style&gt;
          .actor-custom-settings {
              display: none
          }
      &lt;/style&gt;
  }
  </code></pre>
  
  <p>Entire generation code (for a reference, it's quite irrelevant for a question):</p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th class="actor-custom-settings"&gt;Custom Settings&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="table-body"&gt;
          @foreach (var x in Model.Config.Default.Actors)
          {
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" class="form-control actor-name" value="@x.Name"&gt;&lt;/td&gt;
                  &lt;td class="actor-custom-settings"&gt;
                      @if (x.CustomSettings.Count &gt; 0)
                      {
                          &lt;table class="table table-bordered"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Key&lt;/th&gt;
                                      &lt;th&gt;Value&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  @foreach (var pair in x.CustomSettings)
                                  {
                                      &lt;tr&gt;
                                          &lt;td class="actor-custom-key"&gt;@pair.Key&lt;/td&gt;
                                          &lt;td class="actor-custom-value"&gt;&lt;input type="text" class="form-control" value="@pair.Value"&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                  }
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      }
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;button class="btn btn-danger btn-xs table-button-change-state" onclick="deleteTableRow(event)"&gt;
                          &lt;i class="fa fa-remove"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But I'm wondering if there is a pure CSS solution.</p>