仅将样式应用于可见的表格列

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. CSS中有一个特殊的伪类:not()。

   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>