如何将“rowspan”特定的 CSS 放在 html 表格中？答案

【问题标题】：How can you put 'rowspan' specific CSS in an html table?如何将“rowspan”特定的 CSS 放在 html 表格中？
【发布时间】：2016-01-19 02:12:45
【问题描述】：

我有一个使用行跨度的 HTML 表格：

table tr,
td {
  border: 1px solid black;
}
tr:nth-child(1) {
  background-color: red;
}
tr:nth-child(2) {
  background-color: blue;
}

<table>
  <tr>
    <td rowspan=2>Section 1</td>
    <td>Data 1a</td>
  </tr>
  <tr>
    <td>Data 1b</td>
  </tr>
  <tr>
    <td rowspan=3>Section 2</td>
    <td>Data 2a</td>
  </tr>
  <tr>
    <td>Data 2b</td>
  </tr>
  <tr>
    <td>Data 2C</td>
  </tr>

我想使用一些简单的 CSS（例如 nth-child）来将 CSS（例如我的示例中的背景颜色）添加到由多行组成的特定“部分”。行数由rowspan设置。

我的示例 CSS 为第 n 个表格行着色，而我想为整个行跨度的行着色。

更具体地说，在显示的示例中，我想要一种方法

第 1 节，数据 1a 和数据 1b 为红色
第 2 节，数据 2a、数据 2b 和数据 2c 为蓝色

有什么简单的 HTML/CSS 方法可以做到这一点吗？如果可能，我正在寻找非 JavaScript 解决方案。

【问题讨论】：

css 属性选择器是否有效？即td[rowspan] 或td[rowspan=3] ?
@zgood——那不是只选择 tds，而不是 trs？也许将包含行跨度的行放入表格部分？
@robg 喜欢在一组行周围使用
吗？还是会弄乱桌子（或只是不起作用）？
@robg - 啊，你的意思是使用多个，就像第二个答案：stackoverflow.com/questions/9318978/…
我不知道我是否完全理解您的要求。例如，您是说即使第 1 节和 1a 是同一行，您也只想为 1a 和 1b 着色？我首先要说的是，您应该将第 1 节和第 2 节作为标签，而不是普通的标签。这样你就可以不用每一个来定位他们，如果是这样的话。

【解决方案1】：

这个也可以

table tr,
td {
  border: 1px solid black;
}
tr:nth-child(1), tr:nth-child(2){
  background-color: red;
}
tr:nth-child(3),tr:nth-child(4),tr:nth-child(5) {
  background-color: blue;
}*/

<table>
  <tr>
    <td rowspan=2>Section 1</td>
    <td>Data 1a</td>
  </tr>
  <tr>
    <td>Data 1b</td>
  </tr>
  <tr>
    <td rowspan=3>Section 2</td>
    <td>Data 2a</td>
  </tr>
  <tr>
    <td>Data 2b</td>
  </tr>
  <tr>
    <td>Data 2C</td>
  </tr>

【讨论】：

适用于该固定情况 - 但每次我在表格中添加新行时，我都必须编辑所有 CSS 编号。

【解决方案2】：

对我有用的答案（来自@RobG 的评论）是使用<tbody> 将组行划分为多个部分。然后我可以参考每个 tbody 的第 n 个孩子。

下面是修改后的例子：

table tr,
td {
  border: 1px solid black;
}
tbody:nth-child(1) {
  background-color: red;
}
tbody:nth-child(2) {
  background-color: blue;
}

<table>
  <tbody>
  <tr>
    <td rowspan=2>Section 1</td>
    <td>Data 1a</td>
  </tr>
  <tr>
    <td>Data 1b</td>
  </tr>
  </tbody>
  <tbody>
  <tr>
    <td rowspan=3>Section 2</td>
    <td>Data 2a</td>
  </tr>
  <tr>
    <td>Data 2b</td>
  </tr>
  <tr>
    <td>Data 2C</td>
  </tr>
  </tbody>

【讨论】：

【解决方案3】：

如果您对 trs、tds 等使用简单的类或 ID，这实际上是轻而易举的事。我在其中添加了 th，但如果您再次制作这些 td，它仍然会产生相同的结果。通过为每一行提供适当的类名，它们可以很容易地成为目标，现在如果您向每个红色或蓝色行添加更多 <td> 标签，它们将变成正确的颜色，而不是必须弄清楚哪个孩子是什么数字。

table tr,
td, th {
  border: 1px solid black;
}
tr.red > td, tr.red > th {
  background-color: red;
}
tr.blue > td, tr.blue > th {
  background-color: blue;
}

<table>
  <tr class="red">
    <th rowspan=2>Section 1</th>
    <td>Data 1a</td>
  </tr>
  
  <tr class="red">
    <td>Data 1b</td>
  </tr>
  
  <tr class="blue">
    <th rowspan=3>Section 2</th>
    <td>Data 2a</td>
  </tr>
  
  <tr class="blue">
    <td>Data 2b</td>
  </tr>
  
  <tr class="blue">
    <td>Data 2C</td>
  </tr>
  
</table>

https://jsfiddle.net/wm0nx4cg/1/

【讨论】：

这样做的问题是它违反了保持 HTML 数据和它的 CSS 表示分离的原则。所以每次我插入一个新部分时，我都必须调整所有其他部分的颜色。
@Brian 我不太明白你的意思。我承认我不是 HTML 或 CSS 方面的专家，但是当您说“违反了将 HTML 数据与其 CSS 表示分离的原则”时，我不确定您的真正意思。如果你想添加一个新的“Section”，你可以给它一个新的类名。您甚至可以只将一个部分分组到中，thead {background-color: red} 覆盖 thead 标记内的所有行，并对 tbody 标记或 tfoot 标记执行相同操作。
在 CSS 中使用“nth-child”，例如，我可以将第一部分设置为蓝色，第二部分设置为红色，第三部分设置为绿色。我是否在 HTML 中移动部分并不重要 - 它们仍然始终按该顺序着色。
我阅读了您对另一个答案的回复“适用于该固定情况 - 但每次我在表格中添加新行时，我都必须编辑所有 CSS 编号。”在这个 jfiddle 中，我添加了第三部分 jsfiddle.net/fc9m1etp/1，如果您在该部分中添加另一行，该行将是您需要的颜色，并且 colspan 需要为 +1，以便行到位。但是您说您不想进行手动编辑。所以我想知道的是如何生成数据行？需要多久添加一次行？没有这些答案，我知道为什么我的方法会失败。

【解决方案4】：

如果您不想对 HTML 进行任何更改，这可能是最简单的解决方案：

tr, td {
    border: 1px solid black;
}

tr, tr + tr  {
    background-color: red;
}

tr + tr + tr {
    background-color: blue;
}

<table>
    <tr>
        <td rowspan=2>Section 1</td>
        <td>Data 1a</td>
    </tr>
    <tr>
        <td>Data 1b</td>
    </tr>
    <tr>
        <td rowspan=3>Section 2</td>
        <td>Data 2a</td>
    </tr>
    <tr>
        <td>Data 2b</td>
    </tr>
    <tr>
        <td>Data 2C</td>
    </tr>
</table>

另见this Fiddle。

如果您愿意考虑将 tbody 元素添加到您的代码中，请考虑以下替代方案：

tr, td {
    border: 1px solid black;
}

tr  {
    background-color: red;
}

tbody + tbody tr {
    background-color: blue;
}

<table>
    <tbody>
        <tr>
            <td rowspan=2>Section 1</td>
            <td>Data 1a</td>
        </tr>
        <tr>
            <td>Data 1b</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan=3>Section 2</td>
            <td>Data 2a</td>
        </tr>
        <tr>
            <td>Data 2b</td>
        </tr>
        <tr>
            <td>Data 2C</td>
        </tr>
    </tbody>
</table>

另见this Fiddle。

【讨论】：