只有應用樣式可見表列

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>