css表选择长对角线上的单元格

Question

使用CSS，我想格式化一个像这样的表：

最困难的部分是在长对角线上为所有细胞设置黑色背景：<row nr> = <column nr> + 1排除第一行的细胞。我想对不同的表使用相同的CSS，这些表是相似但行数和列数不同的。

这可以仅使用CSS完成吗？怎么样？

<小时/> fwiw，表格的HTML代码：

<table>
  <tr>
    <td>#</td> <td>name</td>
    <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td>
    <td>total</td> <td>//</td>
  </tr>
  <tr>
    <td>1</td> <td>abc</td>
    <td>X</td> <td>9</td> <td>11</td> <td>8</td> <td>10</td>
    <td>38</td> <td>10</td>
  </tr>
  <tr>
    <td>2</td> <td>defgh</td>
    <td>7</td> <td>X</td> <td>8</td> <td>10</td> <td>10</td>
    <td>35</td> <td>9</td>
  </tr>
  <tr>
    <td>3</td> <td>ijk lmn</td>
    <td>5</td> <td>8</td> <td>X</td> <td>9</td> <td>11</td>
    <td>33</td> <td>9</td>
  </tr>
  <tr>
    <td>4</td> <td>op qr st uv</td>
    <td>8</td> <td>6</td> <td>7</td> <td>X</td> <td>12</td>
    <td>33</td> <td>7</td>
  </tr>
  <tr>
    <td>5</td> <td>wxyz</td>
    <td>6</td> <td>6</td> <td>5</td> <td>4</td> <td>X</td>
    <td>21</td> <td>5</td>
  </tr>
</table>

Answer 1

明确的方式是：

.diagonal tbody tr:nth-child(1) td:nth-child(3), 
.diagonal tbody tr:nth-child(2) td:nth-child(4), 
.diagonal tbody tr:nth-child(3) td:nth-child(5), 
.diagonal tbody tr:nth-child(4) td:nth-child(6), 
.diagonal tbody tr:nth-child(5) td:nth-child(7), 
.diagonal tbody tr:nth-child(6) td:nth-child(8) {
    background-color: black;
}

http://jsfiddle.net/9shebq2h/3/

这可以扩展到包含表格所需的最大宽度以及其他选择器（正如OP已经在评论中指出的那样）。

Answer 2

假设你使用SCSS，你可以这样做：

@for $i from 2 through 7 {
    tr:nth-child($i) td:nth-child($i + 1) {
        background-color: black;
    }
}

SCSS就像一种编程语言。它可以避免编写大量重复的CSS。它需要一个预处理器，因此您只需要找到适合您工具链的内容。