CSS 스타일이 각 행의 클래스 속성을 사용하지 않고 테이블 행을 대체할 수 있습니까?

CSS를 사용하여 표 행 색상 대체

표 스타일 지정 시 대체 행 색상을 만드는 것은 일반적인 작업입니다. 전통적으로 테이블 행(TR)에 클래스 속성을 사용하는 것은 제공된 예제에서 볼 수 있듯이 널리 사용되는 접근 방식입니다.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

그러나 이 방법은 더 큰 테이블을 처리할 때 지루할 수 있습니다. 그렇다면 CSS를 사용하여 클래스 속성 없이 대체 행의 스타일을 지정할 수 있습니까?

테이블 클래스로 스타일 지정

대답은 '예'입니다. 테이블 자체에 클래스 속성(table.alternate_color)을 사용하면 각 행에 클래스 속성을 사용하는 것과 동일한 결과를 얻을 수 있습니다.

table.alternate_color tbody tr:nth-child(odd) {
  background-color: #CC9999;
  color: black;
}
table.alternate_color tbody tr:nth-child(even) {
  background-color: #9999CC;
  color: black;
}

이 방법은 유연성을 제공하므로 테이블의 스타일을 쉽게 수정할 수 있습니다. 홀수 행과 짝수 행 모두.

jQuery 사용

또 다른 접근 방식은 jQuery를 사용하여 테이블 행을 조작하는 것입니다. 이 솔루션은 렌더링 프로세스를 더 세밀하게 제어하려는 경우에 적합합니다.

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

CSS nth-child를 사용한 대체 행 색상

또한 CSS nth-child 선택기를 사용하여 지정할 수 있습니다. 대체 행 스타일 지정:

tbody tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

이러한 기술을 활용하면 다음을 사용하여 대체 행 색상으로 역동적이고 시각적으로 매력적인 테이블을 만들 수 있습니다. CSS.

위 내용은 CSS 스타일이 각 행의 클래스 속성을 사용하지 않고 테이블 행을 대체할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!