Question

如果表格中没有行，我该如何隐藏标题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>

任何建议，拜托！

Answer 1

更新了代码段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你不能使用纯css，你在首先检查表的子项，如果表中有子项（在这里SIMPLE）show tr else hide { {1}}，因为css没有后退。你必须使用jquery。

.header

.header

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

Answer 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; }

当表没有使用css的行时隐藏标题div

3 个答案: