Làm thế nào để sử dụng nth-child để tạo kiểu với một bảng với rowspan?

Question

Tôi có một bảng có một hàng sử dụng rowspan. Vì vậy,

<table> 
<tr> 
    <td>...</td><td>...</td><td>...</td> 
</tr> 
<tr> 
    <td rowspan="2">...</td><td>...</td><td>...</td> 
</tr> 
<tr> 
       <td>...</td><td>...</td> 
</tr> 
<tr> 
    <td>...</td><td>...</td><td>...</td> 
</tr> 
</table> 

Tôi muốn sử dụng lớp giả thứ n để thêm màu nền cho mọi hàng khác, nhưng hàng rào đang làm rối tung lên; nó thêm màu nền vào hàng bên dưới hàng với rowpan, khi thực tế tôi muốn nó bỏ qua hàng đó và chuyển sang phần tiếp theo.

Có cách nào để giúp trẻ có thể làm điều gì đó thông minh hay sử dụng [rowspan] trong bộ chọn để thực hiện việc này không? Vì vậy, trong trường hợp này, tôi muốn màu nền nằm trên hàng 1 và 4 nhưng sau đó sau đó trên 6, 8, 10, và vân vân (vì không ai trong số đó có hàng rào)? Nó giống như nếu tôi thấy một rowpan, sau đó tôi muốn nnth-con để thêm 1 đến n và sau đó tiếp tục.

Có lẽ không có giải pháp cho điều này, nhưng nghĩ rằng tôi muốn hỏi :-)

Answer 1

Thật không may, không có cách nào để làm điều này với :nth-child() một mình, hoặc bằng cách sử dụng bộ chọn CSS một mình cho rằng vấn đề. Điều này liên quan đến bản chất của :nth-child() mà chọn hoàn toàn dựa trên một phần tử là con thứ n của cha mẹ của nó, cũng như với CSS's lack of a parent selector (bạn không thể chọn một tr chỉ khi nó không chứa td[rowspan], ví dụ) .

---

jQuery không có bộ chọn :has() rằng CSS thiếu, tuy nhiên, mà bạn có thể sử dụng kết hợp với :even (không :odd như đã ghi bàn 0-lập chỉ mục so :nth-child() 's 1-index) để lọc như một thay thế cho CSS :

$('tr:not(:has(td[rowspan])):even') 

jsFiddle preview

Answer 2

tôi đã có một vấn đề tương tự và tôi chỉ gạt nền hàng với nền bên trong của TD trong số họ. Tùy thuộc vào kết quả mong muốn của bạn, điều này có thể làm việc cho bạn quá?

tr:nth-child(odd) { 
    background: #DDE; 
} 
tr:nth-child(odd) td[rowspan] { 
    background: #FFF; 
} 

Tất nhiên bạn có thể ghi đè các hàng khác như tiêu đề, v.v ... với một lớp hoặc thứ.

Answer 3

gì dường như làm việc đối với tôi là để đặt một td ở hàng dưới đây với display: none

<table> 
    <tr> 
     <td rowspan="2">2 rows</td> 
     <td>1 row</td> 
    </tr> 
    <tr> 
     <td style="display:none"></td> 
     <td>1 row</td> 
    </tr> 
</table> 

Answer 4

Cố gắng bảng riêng biệt bởi tbody, một cái gì đó như:

tbody tr:nth-child(odd){ 
 
    background: #00FFFF; 
 
} 
 
tbody tr:nth-child(even){ 
 
    background: #FF0000; 
 
} 
 

 
tbody:nth-child(odd) td[rowspan]{ 
 
    background: #00FFFF; 
 
} 
 
tbody:nth-child(even) td[rowspan]{ 
 
    background: #FF0000; 
 
}

<table> 
 
<tbody> 
 
<tr> 
 
\t <td rowspan="4">...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td rowspan="4">...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
    <td>...</td> 
 
</tr> 
 
</tbody> 
 
<tbody>  
 
<tr> 
 
\t <td rowspan="3">...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td rowspan="3">...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
    
 

Answer 5

Tôi đã sử dụng kết hợp câu trả lời trước để thêm tr với display=none theo chương trình:

HTML

<table> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    <td>C</td> 
    </tr> 
    <tr> 
    <td rowspan=2>1</td> 
    <td rowspan=2>2</td> 
    <td>sub C 1</td> 
    </tr> 
    <tr> 
    <td>sub C 2</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    <tr> 
    <td>6</td> 
    <td>7</td> 
    <td>8</td> 
    </tr> 
</table> 

CSS

table tr:nth-child(2n) { 
    background-color: #F8ECE0; 
} 

jQuery

$("<tr style='display:none'></tr>").insertAfter('tbody tr:has(td[rowspan])'); 

Xem JSfiddle.

Answer 6

Bạn có thể thực hiện việc này chỉ bằng CSS nếu bạn sẵn sàng thêm một số đánh dấu bổ sung. Gói mỗi "nhóm" hàng trong một thẻ <tbody>. Sau đó, thêm màu nền cho mọi số lẻ tbody.

tbody:nth-child(odd) { 
 
    background-color: yellow; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 1</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="2">tr 2+3</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    <tr> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 4</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 5</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 6</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 7</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 8</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 9</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 10</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
</table>