只有应用样式可见表列

Question

我有一个表上，我将CSS应用到所有列，以便它看起来像一个网格：

在一定条件下，其中的一些列的需要是隐藏：

我申请这个样子的（加左边框每列除第一列）方式：

td.nowrap { 
    white-space:nowrap; 
    } 

    table.table td:nth-child(1n + 2), table.table thead th:nth-child(1n + 2), table.table tfoot th:nth-child(1n + 2) { 
    border-left: 1px solid #dddddd; 
    } 

    .table .text-center { 
    text-align: center 
    } 

一旦我隐藏的第一列，在左边框的应用，我上左侧有一个额外粗线：

有没有只适用td:nth-child(1n + 2)可见列的方式，也没有disabled的属性？

<td ..... hidden>_____</td> 

我目前正试图用:not伪类没有任何的运气：

table.table td:not([hidden]):nth-child(1n + 2), table.table thead th:not([hidden]):nth-child(1n + 2), table.table tfoot th:not([hidden]):nth-child(1n + 2) { 
    border-left: 1px solid #dddddd; 
    } 

的jsfiddle，借以说明问题：https://jsfiddle.net/w2jnqht3/

Answer 1

1. 有特殊的伪类:not()在CSS中。

   https://css-tricks.com/almanac/selectors/n/not/

   你可以以这种方式使用它：

   td:nth-child(1n + 2):not([hidden]) 
    
       { 
    
        background-color: red; 
    
       }

   <table> 
    
       <tr> 
    
       <td>Cell</td> 
    
       <td hidden>Cell with hidden attribute</td> 
    
       <td>Cell</td> 
    
       <td hidden>Cell with hidden attribute</td> 
    
       <td>Cell</td> 
    
       <td hidden>Cell with hidden attribute</td> 
    
       <td hidden>Cell with hidden attribute</td> 
    
       </tr> 
    
   </table>

2. 不过你的情况其实是另外一个问题。 如果您需要隐藏连续第一个单元格的左边框（考虑到可能存在连续的隐藏单元格），则可以采用更简单的方法。 正如你使用bootstrap，你需要记住它。

th 
 
{ 
 
    width: 50px; /* Just for better appearence */ 
 
} 
 

 

 
table 
 
{ 
 
    border-collapse: collapse; /* Cell border will collapse */ 
 
    border: none; /* Remove border of the table */ 
 
} 
 

 
.table > thead > tr > th /* Selector with the same specificity as bootstrap has about <th> elements */ 
 
{ 
 
    border: 2px solid green; /* All borders are green */ 
 
    border-top: none; /* Remove top border */ 
 
    background-color: red; 
 
} 
 

 
.table > thead > tr > th:first-child, /* The same specificity and very first cell */ 
 
.table > thead > tr > th[hidden] + th /* The same specificity and a cell after hidden cell (first visible) */ 
 
{ 
 
    background-color: #FFF; 
 
    border-left: none;

<div class="table-responsive"> 
 
    <table class="table lot-goods-list table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th class="sortable text-center" hidden>A</th> 
 
       <th class="sortable text-center">B</th> 
 
       <th class="sortable text-center">C</th> 
 
       <th class="sortable text-center">D</th> 
 
       <th class="sortable text-center">E</th> 
 
       <th class="sortable text-center">F</th> 
 
       <th class="actions border left column-squash"> <span class="glyphicon glyphicon-remove"></span> 
 

 
       </th> 
 
      </tr> 
 
     </thead> 
 
    </table> 
 
</div> 
 
<div class="table-responsive"> 
 
    <table class="table lot-goods-list table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th class="sortable text-center">B</th> 
 
       <th class="sortable text-center">C</th> 
 
       <th class="sortable text-center">D</th> 
 
       <th class="sortable text-center">E</th> 
 
       <th class="sortable text-center">F</th> 
 
       <th class="actions border left column-squash"> <span class="glyphicon glyphicon-remove"></span> 
 

 
       </th> 
 
      </tr> 
 
     </thead> 
 
    </table> 
 
</div>