CSS를 사용하는 다른 테이블 행 색상? 대체 행 색상의 테이블을 사용하고 있습니다. tr.d0

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

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를 사용하여 행에 “얼룩말 줄무늬”를 만들려면 어떻게해야합니까?

답변

$(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");
});

답변

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

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

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

답변

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

HTML :

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

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

답변

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

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

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

답변

대체 행 색상에 홀수 및 짝수 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>

스 니펫 확장

답변

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

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

답변

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>