2012-03-09 15 views
7

Tôi có bảng sau, với dòng đầu tiên chứa 2 dòng con và dòng thứ hai chứa 3 dòng con.Html multilines tables (rowspan) - làm thế nào để zebra đúng cách?

Whith phong cách css này, màu ngựa vằn (ie màu thay thế trên hai hàng liên tiếp) là bị lỗi, tế bào chính thứ hai sẽ có màu trắng và không màu xám:

tr:nth-child(odd) {background-color: #eee;} 
tr:nth-child(even) {background-color: #fff;} 

Faulty zebra with nth-child css

Vì vậy, là có một cách để zebra màu như một bảng đúng cách?

Tất nhiên, sự cố thực sự của tôi có giao dịch với nhiều hàng hơn, với số lượng các dòng phụ thay đổi nhiều hơn nhiều.

<head> 
    <style> 
     tr:nth-child(odd) {background-color: #eee;} 
     tr:nth-child(even) {background-color: #fff;} 
    </style> 
<head> 
<body> 
    <table border="1"> 
     <tr> 
      <td rowspan="2"> 
       Big1 
      </td> 
      <td> 
       small1 
      </td> 
     </tr> 
     <tr> 
      <td> 
       small2 
      </td> 
     </tr> 
     <tr> 
      <td rowspan="3"> 
       Big2 
      </td> 
      <td> 
       small1 
      </td> 
     </tr> 
     <tr> 
      <td> 
       small2 
      </td> 
     </tr> 
     <tr> 
      <td> 
       small3 
      </td> 
     </tr> 
    </table> 
</body> 
+0

"màu ngựa vằn" là gì? – Oded

+0

Đã thêm định nghĩa cho màu ngựa vằn: màu thay thế trên hai hàng liên tiếp – Vinzz

+0

Bạn muốn sọc vằn trông như thế nào? – BoltClock

Trả lời

1

Nó hoạt động như được trình bày.

Nó isnt làm việc như

<tr> 
     <td rowspan="2"> 
      Big1 
     </td> 
     <td> 
      small1 
     </td> 
    </tr> 

sẽ có màu xám, đó là TR đầu tiên (lẻ)

<tr> 
     <td> 
      small2 
     </td> 
    </tr> 

sẽ trắng, TR thứ hai của mình (thậm chí) vv

Cách tốt nhất để làm điều đó sẽ là gán các lớp 'lẻ' và 'thậm chí' cho câu hỏi theo cách thủ công.

+0

Thật vậy, tôi đã đạt được kết luận tương tự. Cảm ơn, bạn đã có điểm – Vinzz

Các vấn đề liên quan