如果表<td>标记为空或为空，如何隐藏整个<div>？ （仅限CSS）

Question

如果我所有的表格标签都为空或为空，我试图隐藏div。如果不为空，则显示将显示该表的div。我不能在这种环境下使用jquery，因此我正在寻找纯CSS解决方案。我相信：可能是一个可用的：empty标记，但我不知道如何正确定位div。

  <div class="zpelement-wrapper field" id="elem_1562319120962" style="" gptype="html" eltype="related">
   <div class="singlebuild listArea">
    <div style="">
     <table style="width: 100%;" cellspacing="0" cellpadding="0" formcompid="3772761000000170459" layout="2">
      <tbody> 
       <tr> 
        <td class="labelcontent" style="width: 50%"> 
         <div style="">
          <label>Other Line Item</label> 
         </div> </td> 
        <td class="value" style="width: 50%"> 
         <div style="">
          <div class="listArea"> 
           <table width="100%" class="refValueTable" cellspacing="0" cellpadding="0" selectedfields="3772761000000170485,3772761000000170475,3772761000000170489" refformid="3772761000000170411" reffieldid="3772761000000170421"> 
            <tbody> 
             <tr>
              <th class="labelcontent" style="" formcompid="3772761000000170485"> <label>Product Category</label></th>
              <th class="labelcontent" style="" formcompid="3772761000000170475"> <label>Product</label></th>
              <th class="labelcontent" style="" formcompid="3772761000000170489"> <label>Cost</label></th> 
             </tr>  
            </tbody> 
           </table>
          </div>
         </div> </td> 
       </tr> 
      </tbody>
     </table>
    </div>
   </div>
  </div>

任何人都可以提供任何解决方案的帮助吗？

Answer 1

您无法使用css做到这一点，但可以通过某些方式重新排列HTML，然后使用伪选择器：empty

div:empty {
   display: none;
}

来源：https://css-tricks.com/almanac/selectors/e/empty/

Answer 2

您不能仅使用CSS来完成，但是您可以使用以下CSS在表格中隐藏空单元格：

table {
  empty-cells: hide;
}