Color table columns from N onwards (td:nth-of-type)

问题

I want to add a certain background color from a certain column onwards. Instead of having to use a css class for each column, i would rather prefer to do it otherwise if possible.

I will have a huge table with hundreds of rows and around 25 columns and I prefer to avoid unnecessary code.

Currently, I am using td:nth-of-type property to do it:

.demo tr.selectedRow td:nth-of-type(9),
.demo tr.selectedRow td:nth-of-type(10),
.demo tr.selectedRow td:nth-of-type(11),
.demo tr.selectedRow td:nth-of-type(12),
.demo tr.selectedRow td:nth-of-type(13),
.demo tr.selectedRow td:nth-of-type(14),
.demo tr.selectedRow td:nth-of-type(15),
.demo tr.selectedRow td:nth-of-type(16) {
  background-color: #fff16b;
}

<table border="1" class="demo">
  <tr>
    <td>not selected</td>
  </tr>
  <tr class="selectedRow">
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
</table>

I was wondering if there's any way to reduce this even more.

The documentation doesn't say much more...

回答1:

http://css-tricks.com/examples/nth-child-tester/ This tester can really help. It looks like you want to select everything after 9 so use the code below

Select every TD except The First 8

.demo tr.selectedRow td:nth-child(n+9) {
  color: red;
}

<table border="1" class="demo">
  <tr>
    <td>not selected</td>
  </tr>
  <tr class="selectedRow">
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
</table>

回答2:

If every column after the eight why don't you have a class for the first eight and nothing for the others. This would work if all the rest should be the same of course.

This would work on IE even.

Example using colgroup

.colSpecial {
  background-color: #fee;
}

.colDefault {
  background-color: #fff;
  border: 1px solid black;
}

tr:hover {
  background-color: #efe;
}

<table>
  <colgroup>
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colDefault" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
    <col class="colSpecial" />
  </colgroup>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

来源：https://stackoverflow.com/questions/14476428/color-table-columns-from-n-onwards-tdnth-of-type

标签

html

css

css-selectors

css-tables