дисплей: не работает для таблицы внутри div

Question

У меня есть этот текст, который при нажатии на него должен показывать таблицу.

<div id="lastten" ng-controller="LastTenbuilds"> 
    <div ng-click="lasttenBuilds();" onclick="showlasttenbuilds();">Get List of Last Ten </div> 
    <table class="featuretable" id="lasttenBuildsTable">    
    <thead > 
     <!--change style of column with css--> 

     <tr > 
      <th class="Header">Total</th> 
      <th class="Header">Passed</th> 
      <th class="Header">Failed</th> 
     </tr> 
    </thead> 

    <tbody><!--display none--> 
    <!--onclick-->            
     <tr ng-repeat="case in lastten">       
      <td colspan="1" >{{case.Total}}</td> 
      <td colspan="1" >{{case.Passed}}</td> 
      <td colspan="1" >{{case.Failed}}</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Мой CSS имеет

#lasttenBuildsTable{ 
    display:none !important; 
} 

table.featuretable { 
table-layout:fixed; 
width:100%; 
font-family: Helvetica, Arial, sans-serif; 
margin-top: 20px; 
margin-bottom: 20px; 
border-collapse: 
collapse; border-spacing: 0; 

} 

table.featuretable td, th { 

border: 1px solid transparent; 
height: 30px; 
transition: all 0.3s; 
overflow: hidden; 
} 

table.featuretable th { 

font-weight: bold; 

text-align: center; 
vertical-align: :middle; 
} 

table.featuretable td { 

text-align: center; 
vertical-align: :middle; 
} 

так что таблица должна быть скрыта до текста щелкают. Но это не скрыто. В контрольном элементе хрома пересекается display:none. Кто-то знает проблему?

Хорошо, важно! Скрыть это, но onlick/ng-click не отображает его. Я добавил onlick в тег, чтобы просто проверить, сработало ли оно.

Вот js-

function showlasttenbuilds(){ 
       document.getElementById("lasttenBuildsTable").style.display="Block"; 
      } 

Answer 1

Это должно работать

#lasttenBuildsTable{ display:none !important;} 

Answer 2

Имейте взгляд, может быть это поможет

$(document).ready(function(){ 
 
    $("#showHide").click(function(){ 
 
     $(".featuretable").toggleClass("display-table"); 
 
    }); 
 
});

.featuretable{ 
 
    display:none !important ; 
 
} 
 

 
.display-table{ 
 
    display:block !important; 
 
    } 
 

 
table.featuretable { 
 
table-layout:fixed; 
 
width:100%; 
 
font-family: Helvetica, Arial, sans-serif; 
 
margin-top: 20px; 
 
margin-bottom: 20px; 
 
border-collapse: 
 
collapse; border-spacing: 0; 
 

 
} 
 

 
table.featuretable td, th { 
 

 
border: 1px solid transparent; 
 
height: 30px; 
 
transition: all 0.3s; 
 
overflow: hidden; 
 
} 
 

 
table.featuretable th { 
 

 
font-weight: bold; 
 

 
text-align: center; 
 
vertical-align: :middle; 
 
} 
 

 
table.featuretable td { 
 

 
text-align: center; 
 
vertical-align: :middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<div id="lastten" ng-controller="LastTenbuilds"> 
 
    <input type="button" value="toggleTable" id="showHide" /> 
 
    <div ng-click="lasttenBuilds();">Get List of Last Ten </div> 
 
    <table class="featuretable" id="lasttenBuildsTable">    
 
    <thead > 
 
     <!--change style of column with css--> 
 

 
     <tr > 
 
      <th class="Header">Total</th> 
 
      <th class="Header">Passed</th> 
 
      <th class="Header">Failed</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody><!--display none--> 
 
    <!--onclick-->            
 
     <tr ng-repeat="case in lastten">       
 
      <td colspan="1" >{{case.Total}}</td> 
 
      <td colspan="1" >{{case.Passed}}</td> 
 
      <td colspan="1" >{{case.Failed}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>