如何將“行距”特定的CSS放在html表中？

Question

我有一個使用rowpans的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（例如，在我的示例中為background-color）添加到由多行組成的特定“ Section”中。 行數由行跨度設置。

我的示例CSS為第n個表格行上色，而我想為整個行中的行上色。

更具體地說，在所示的示例中，我想一種方法

• 第1節，數據1a和數據1b為紅色
• 第2部分的數據2a，數據2b和數據2c為藍色

關於簡單的HTML / CSS方式的建議嗎？ 如果可能，我正在尋找非JavaScript解決方案。

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

Answer 2

對我有用的答案（來自@RobG的評論）是使用<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> 

Answer 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/

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

另請參見此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> 

另請參見此Fiddle 。