display：none不适用于div中的表

Question

我有这个文字，当点击时应该显示表格。

@media (min-width: $screen-lg-min) {
    .navbar{
        height: $navbar-height * 2;
    }
}

我的CSS有

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

因此在单击文本之前应隐藏表格。但它并没有被隐藏。在chrome的inspect元素中，#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; } 被交叉。有人知道这个问题吗？

好的，！important确实隐藏了它，但是onlick / ng-click没有显示回来。我现在在标签中添加onlick只是为了检查它是否有效。

这里是js -

display:none

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>