Question

我有一个来自n列的表。每个单元格都有一个column-n类。

我想添加表类hide-column-n并使用类column-n隐藏所有单元格。这有可能通过css吗？

示例：

＆＃13;

.table {
    border: 1px solid black;
  }
  .table thead{
    background-color: lightgray;
  }
  .table td{
    border: 1px solid gray;
    width: 50px;
  }

＆＃13;

<table class="table">
  <thead>
  <tr>
    <td class="column-1">One</td>
    <td class="column-2">Two</td>
    <td class="column-3">Three</td>
    <td class="column-x">...</td>
    <td class="column-n">N</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td class="column-1">One</td>
    <td class="column-2">Two</td>
    <td class="column-3">Three</td>
    <td class="column-x">...</td>
    <td class="column-n">N</td>
  </tr>
  <tr>
    <td class="column-1">One</td>
    <td class="column-2">Two</td>
    <td class="column-3">Three</td>
    <td class="column-x">...</td>
    <td class="column-n">N</td>
  </tr>
  <tr>
    <td>...</td>
  </tr>
  </tbody>
</table>

＆＃13;

Answer 1

以下是示例https://jsfiddle.net/xr21kwrh/

<table class="table">
  <thead>
    <tr>
      <th class=column-1">One</th>
      <th class"column-2">Two</th>
      ...
      <th class="column-n">N</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class=column-1">One</t>
      <td class"column-2">Two</td>
      ...
      <td class="column-n">N</td>
    </tr>
    <tr>
      <td class=column-1">One</t>
      <td class"column-2">Two</td>
      ...
      <td class="column-n">N</td>
    </tr>
    ...
 </tbody>
</table>

<style>
th:nth-child(2){display: none;}
td:nth-child(2){display: none;}
</style>

Answer 2

        <table class="table">
         <thead>
         <tr>
      <th class=column-1">One</th>
      <th class"column-2">Two</th>
      ...
      <th class="column-n">N</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class=column-1">One</t>
      <td class"column-2">Two</td>
      ...
      <td class="column-n">N</td>
    </tr>
    <tr>
      <td class=column-1">One</t>
      <td class"column-2">Two</td>
      ...
      <td class="column-n">N</td>
    </tr>
    ...
 </tbody>
</table>

<style>
.column-n{ display-none !important; }
</style>

Answer 3

如果你使用sass / scss，你可以这样做（在SCSS中）：

@for $i from 1 through 10 {
  .hide-column-#{$i} .column-#{$i} {
    display: none;
  }
}

它将编译为：

.hide-column-1 .column-1 {
  display: none;
}

.hide-column-2 .column-2 {
  display: none;
}

....

.hide-column-n .column-n {
  display: none;
}

然后按预期使用它：

<table class="table hide-column-1 hide-column-2">

codepen demo here

按类隐藏表列

3 个答案: