テーブルの空白を持つCSS空のセル

Question

私はHTMLテーブルを持っていて、列のすべてがtdであれば非表示にしたい。

私は、次のCSSを使用：

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

をしかし、私はこの列のヘッダーを持つbecuaseそれは動作しません。私は、この列にデータがないかどうかを判断するために、レンダリング時間アルゴリズムを使用しています今

<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ソリューションがあるのでしょうか？私が正しくあなたをunderstadingてる場合

Answer 1

、あなたは、単に彼らが空なら、それらを.actor-custom-settingsクラスでth要素をターゲットと非表示にする第2のセレクタを追加して、あなたのCSSルールを編集する必要があります。

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

または、単一のクラスセレクターに簡略化することができます。

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