javascript 및 짝수 / 홀수 클래스 생성을 사용하지 않고 html 테이블에 얼룩말 줄무늬를 만드는 방법은 무엇입니까?

javascript 및 짝수 / 홀수 클래스 생성을 사용하지 않고 html 테이블에 얼룩말 줄무늬를 만드는 방법은 무엇입니까?

---

js 물건을 사용하거나 테이블 행에 대해 짝수 / 홀수 클래스를 생성하기 위해 서버 측 코드를 작성하지 않고 html 테이블을 얼룩말 줄무늬로 만들고 싶습니다. 원시 CSS를 사용하는 것이 가능합니까?

---

CSS3 선택기로 가능합니다 :

tr:nth-child(even) {
  background-color: red;
}


tr:nth-child(odd) {
  background-color: white;
}

caniuse.com 에 따르면 모든 브라우저가 현재이를 지원합니다.

---

변경하는 모든 것이 배경색 인 경우 다음이 작동합니다. 여기서 test.gif는 상위 20px 한 색상의 40px 높이 이미지이고 아래쪽 20 픽셀은 다른 색상입니다. 다른 CSS 속성을 변경해야하는 경우 거의 문제가 발생합니다.

table {  background: url(test.gif) top; }
table tr { height: 20px; }

---

http://www.w3.org/Style/Examples/007/evenodd CSS 3 nth-child. 브라우저 지원이 제한되어 있으므로 Sizzle (예 : jquery에 포함됨)으로 동작을 재현 할 수 있습니다.

---

(CSS <= 2에서) 아니요. 불행히도 CSS만으로 수행해야 할 위치 (부모의 자식 내 숫자 측면에서)를 기반으로 작동하는 선택기 (CSS <= 2)가 없습니다.

메모 : 이미 CSS3에 대해 읽어보세요!

---

에서 http://www.w3.org/TR/css3-selectors/#structural-pseudos 당신은 n 번째의 아이를 사용하는 방법에 대한 설명과 예제를 찾을 수 있습니다 :

tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
  background-color: green;
}
tr:nth-child(odd)  /* same */ {
  background-color: green;
}
tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
  background-color: pink;
}
tr:nth-child(even) /* same */ {
  background-color: pink;
}

브라우저 호환성에 행운을 빕니다 -필요합니다.
IE에서 작동하도록 만드는 방법이 있습니다 (JS 사용). 그 선별은 여러분에게 맡기겠습니다.

참고 URL : https://stackoverflow.com/questions/2765510/how-to-create-zebra-stripes-on-html-table-without-using-javascript-and-even-odd