3

特定の列以降に特定の背景色を追加したい。各列に css クラスを使用する代わりに、可能であればそれを行うことをお勧めします。

数百行、約 25 列の巨大なテーブルを作成するので、不要なコードは避けたいと考えています。

現在、私はtd:nth-of-typeそれを行うためにプロパティを使用しています:

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

これをさらに減らす方法はないかと考えました。

ドキュメントにはそれ以上のことは書かれていません...

4

2 に答える 2

10

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>

于 2013-01-23T09:42:11.697 に答える
0

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>

于 2013-01-23T09:42:10.913 に答える