얼룩말 스트라이핑은 단 하나의 테이블 컬럼으로

Question

테이블을 사용하는 테이블과 Zebra 스트라이핑을 테이블 행에 사용하는 테이블이 있습니다.나는 테이블 열 중 하나에 Zebra 스트라이핑을 추가하여 조금 강조 해주고 싶습니다.다음과 같이 :

Answer 1

스트라이프하려는 컬럼 인덱스를 알고있는 경우 다음과 같은 n 번째 유형 선택기를 사용하여 CSS에서만 수행 할 수 있습니다 :

tr:nth-of-type(even) td:nth-of-type(3) { background: rgba(0,0,0,0.1); }

(여기서 3는 대상 열 인덱스의 자리 표시 자를 사용하고 있음)

다른 옵션은 스트라이프하려는 열의 머리글 (또는 첫 번째 TD)에 클래스를 넣은 다음 JS를 사용하여 동일한 열의 다른 TDS를 스트라이프합니다.

var col_to_stripe = $('th.stripe-this-one').index();

$('table.selectively-stripe').find('tr:odd')
  .each(function() {
    $(this).children('td')
      .eq(col_to_stripe)
      .css('background', 'pink');
  });

.

클래스는 순수한 CSS 접근 방식과 같이 원하는 열 인덱스를 놓을 수 있지만 코드의 명확성을 위해 더 좋습니다.

데모 여기 : http://jsbin.com/axutal/2/edit

Answer 2

이 링크

를 확인하십시오.

클래스 이름이나 ID를 제공하지 않고 jQuery를 사용하여 수행 할 수 있습니다.

 $('tr:odd  td:nth-child(4)').css('background','#999999'); /* For odd td's */
 $('tr:even td:nth-child(4)').css('background','#DDDDDD'); /* For even td's */  

.

이 "nofollow"> jQuery 선택기 이 링크

Answer 3

해당 열의 TDS에 대한 추가 클래스 이름과 해당 CSS 선언이 필요합니다.