hide header div when table has no rows using css

Question

How can I hide the header div when there are no rows in the table. My css is not working.

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

Any suggestions, Please!

But jquery is not working in my PDF view. that's why I m trying to do like this — 06011991, Aug 23 '17 at 13:12
Are you looking for [this](https://stackoverflow.com/questions/9219807/using-javascript-inside-a-pdf)? — Abhishek Pandey, Aug 23 '17 at 13:14

score 1 · Answer 1 · answered Aug 23 '17 at 13:22

1

Updated Snippet :

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>

answered Aug 23 '17 at 13:22

Maulik Barad

610
3
13

But jquery won't work in my PDF view :( – 06011991 Aug 23 '17 at 13:25

Ehsan · Answer 2 · 2017-08-23T13:33:35.230

You can not use pure css,you in css can not first check childrens of table,if table have children(in here tr) show .header else hide .header,because css have not backward.you must use 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>

But jquery won't work in my PDF view :( – 06011991 Aug 23 '17 at 13:25 — 06011991, Aug 23 '17 at 13:25

score 0 · Answer 3 · answered Aug 23 '17 at 13:43

You can't select a previous element because CSS does not work backwards (Hence, Cascading Style Sheet)

BUT, If you really want to use only CSS, you can use 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; }

hide header div when table has no rows using css

3 Answers3