当表没有使用css的行时隐藏标题div [重复]答案

【问题标题】：hide header div when table has no rows using css [duplicate]当表没有使用css的行时隐藏标题div [重复]
【发布时间】：2018-02-01 02:25:17
【问题描述】：

当表格中没有行时，如何隐藏标题 div。我的 CSS 不工作。

.myTable:empty ~ .header {
  display: none;
}

<div class="row">
  <div class="header">ADDITIONAL ITEMS:</div>
  <div class="clearfix"></div>
  <div class="table-responsive m-t">
    <table class="myTable">
    </table>
  </div>
</div>

任何建议，请！

【问题讨论】：

CSS中没有父选择器，需要使用JS
但是 jquery 在我的 PDF 视图中不起作用。这就是为什么我要这样做
您在寻找this吗？
好的，谢谢你检查链接

标签： html css

【解决方案1】：

更新片段：

if($(".myTable tr").length > 0){
	alert('row present')
}else{
	$('.header').hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="header">ADDITIONAL ITEMS:</div>
  <div class="clearfix"></div>
  <div class="table-responsive m-t">
    <table class="myTable">
     <!--<tr></tr>-->
    </table>
  </div>
</div>

【讨论】：

但是 jquery 在我的 PDF 视图中不起作用:(

【解决方案2】：

你不能使用纯css，你在css中不能首先检查表的孩子，如果表有孩子（在这里tr）显示.header否则隐藏.header，因为css 没有后退。你必须使用 jquery。

$(document).ready(function(){
  if(!$('.myTable').find('tr').length) 
    $('.header').hide();
})

$(document).ready(function(){
  if(!$('.myTable').find('tr').length) 
    $('.header').hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<div class="row">
  <div class="header">ADDITIONAL ITEMS:</div>
  <div class="clearfix"></div>
  <div class="table-responsive m-t">
    <table class="myTable">
    </table>
  </div>
</div>

【讨论】：

但是 jquery 在我的 PDF 视图中不起作用:(

【解决方案3】：

您不能选择前一个元素，因为 CSS 不能向后工作（因此，Cascading 样式表）

但是，如果你真的只想使用 CSS，你可以使用 flex：

https://jsfiddle.net/0d7402sm/

#flex { 
  display: flex; 
  /* Optional, if you want the DIVs 100% width: */ 
  flex-direction: column;
}

.myTable:empty ~ .header {
  display:none;
}

#flex > .myTable { order: 2; }
#flex > .header { order: 1; }

【讨论】：