CSS를 사용하는 다른 테이블 행 색상?

462

이것과 함께 대체 행 색상의 테이블을 사용하고 있습니다.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}
<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>
스 니펫 확장

여기에 클래스 tr를 사용하고 있지만에 대해서만 사용하고 싶습니다 table. 이보다 클래스에 클래스를 사용하면 tr대안에 적용됩니다 .

CSS를 사용하여 이와 같이 HTML을 작성할 수 있습니까?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

CSS를 사용하여 행에 "얼룩말 줄무늬"를 만들려면 어떻게해야합니까?

html  css  html-table 
— 칼리 차란 라지 푸트
소스
1
- 나는 모든 n 번째의 아이에 대한 가능한 패턴 ()를 사용하여 데모 만든 xengravity.com/demo/nth-child
— xengravity을

답변:

760 

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

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>
스 니펫 확장

CSS 선택기, 실제로 의사 선택기 인 nth-child가 있습니다. 순수 CSS에서는 다음을 수행 할 수 있습니다.

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

참고 : IE 8에서는 지원되지 않습니다.

또는 jQuery가있는 경우 :

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});
— 러셀 디아스
소스
대체 행의 하이퍼 링크 색상을 변경할 수도 있습니다. 짝수 행과 홀수에 다른 하이퍼 링크 색상을 원합니다. 감사합니다
— عثمان غني
4
좋은 답변입니다! 그러나 정보를 위해 사용할 수있는 또 다른 CSS 선택기가 있습니다. tr:nth-of-type(odd/even)
— Nikhil Nanjappa
2
@ عثمانغني : 예, 당신은 그냥tr:nth-child(even) a
— Gerard
1
HTML을 동적으로 쓰면 작동하지 않습니다. 그런 다음 행에 클래스를 추가해야합니다.
— erik
2019 년 : 더 이상 최상의 솔루션이 아닙니다. 순수한 CSS를 사용하십시오 .
— 키라 미수
158

당신은이 :nth-child()의사 클래스를 :

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

초기에 :nth-child()자사의 브라우저 지원 가난한 사람들의 친절했다. 이것이 설정 class="odd"이 일반적인 기술이 된 이유 입니다. 2013 년 후반에 IE6와 IE7이 마침내 죽었다 (또는 돌보지 않을 정도로 아프다).하지만 IE8이 아직 남아 있습니다. 고맙게도 유일한 예외입니다.

— 알바로 곤살레스
소스
3
헤더에 CSS를 적용하지 않기 때문에 선호되는 답변
— Mike
안녕하세요. 몇 년이 지났지 만 클릭하면 테이블 행에 jqeury가있는 bg 색상의 선택된 클래스를 추가하는 것은 어떻습니까? n 번째 자녀 의사 클래스 BG 컬러 우선 당신이 jqeury와 "선택"클래스를 추가 할 때 : 나는이 것으로 나타났습니다
— dutchkillsg
@dutchkillsg 그것은 내 답변에 대한 의견이 아닌 새로운 질문으로 보입니다 ...
— Álvaro González
"얼룩말 줄무늬"(즉, 수직)의 경우, 단지 교환 tr:nth-child(odd)과 함께 td:nth-of-type(odd). 이 경우 요소 가 td아닌 다른 의사 클래스를 적용합니다 tr.
— 키라 미수
36

을 사용하여 HTML 코드에 다음을 추가하기 만하면 <head>됩니다.

HTML :

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

jQuery 예제보다 쉽고 빠릅니다.

— bmich72
소스
이것이 정답입니다. 가능한 한 CSS는 스타일을 처리해야하며, 자바 스크립트는 다른 문제를 처리하는 데 사용될 수 있습니다.
— Tormod Haugene
나는 매일 HTML을하지 않습니다. #ccc나에게 유효한 색상 코드처럼 보이지 않습니다. 설명 할 수 있습니까? 감사.
— tommy.carstensen 1
1
@ tommy.carstensen "약식 16 진수 형식"이라고합니다. 기본적으로 #ccc로 확장됩니다 #cccccc. 즉, 각 RGB 색상에는 16 진수 값 cc또는 10 진수 값 204(즉 rgb(204, 204, 204))이 있습니다. 자세한 내용은 여기를 참조하십시오-> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form
— Nick Grealy
78.0.3904.108 크롬 버전에서 작동하지 않습니다
— IlludiumPu36에게
13

css를 사용하여 이와 같은 HTML을 작성할 수 있습니까?

예, 가능하지만 :nth-child()의사 선택기 를 사용해야합니다 (지원이 제한적 임).

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}
— 사프 라즈
소스
13

대체 행 색상에 홀수 및 짝수 CSS 규칙과 jQuery 메소드를 사용할 수 있습니다.

CSS 사용

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

jQuery 사용

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}
<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>
스 니펫 확장

— 산토스 칼세
소스
10

위 코드의 대부분은 IE 버전에서 작동하지 않습니다. IE + 다른 브라우저에서 작동하는 솔루션은 다음과 같습니다.

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>
— 스리 완타 아타나 야케
소스
9 
<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>
— 프레이라나
소스
46
OK jQuery는이 사이트에서 상당히 보편적이지만, 설명없이 jQuery를 게시해서는 안됩니다. 이 스크립트는 저절로 작동하지 않습니다.
— DisgruntledGoat
4

nth-child (odd / even) 선택기를 사용할 수 있지만 모든 브라우저 ( 예 : 6-8, ff v3.0 )가 이러한 규칙을 지원하는 것은 아니므로 대부분의 솔루션이 클래스를 추가하기 위해 일부 형태의 javascript / jquery 솔루션으로 대체되는 이유 이러한 비 호환 브라우저의 행은 호랑이 줄무늬 효과를 얻습니다.

— 붉은 광장
소스
3

PHP 에서이 작업을 수행하는 매우 쉬운 방법이 있습니다. 쿼리를 이해하면 PHP로 코딩하고 CSS와 자바 스크립트를 사용하여 출력을 향상시키는 것으로 가정합니다.

데이터베이스의 동적 출력은 for 루프를 수행하여 결과를 반복 한 다음 테이블에로드합니다. 다음과 같이 함수 호출을 추가하십시오.

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

그런 다음 페이지 또는 라이브러리 파일에 함수를 추가하십시오.

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

이제 이것은 새로 생성 된 각 테이블 행의 색상 사이에서 동적으로 번갈아 나타납니다.

모든 브라우저에서 작동하지 않는 CSS를 사용하는 것보다 훨씬 쉽습니다.

도움이 되었기를 바랍니다.

— 표
소스
감사합니다 @ 마크. 사이트가 PHP, .net 또는 간단한 HTML로되어있는 것은 수정되지 않았습니다.
— 칼리 차란 라지 푸트
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.