Question

我有一个表格，我将CSS应用于所有列，使其看起来像一个网格：

在某些情况下，需要隐藏其中一些列：

我正在应用的样式如下所示（向第一列除了每个列添加border-left）：

 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
  }

一旦我隐藏了第一列，就会应用border-left，左边会有一条粗线：

是否有办法仅将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显示问题：

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

但你的情况实际上是另一个问题。如果你需要连续隐藏第一个单元格的左边框（考虑到一行中可能有隐藏的单元格），你可以更简单的方式进行。在使用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>

仅将样式应用于可见表列

1 个答案: