programing

CSS를 사용한 대체 테이블 행 색상?

skycolor 2023. 10. 19. 22:09
반응형

CSS를 사용한 대체 테이블 행 색상?

저는 이것과 행 색상이 번갈아 나오는 테이블을 사용하고 있습니다.

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>

n번째 차일드라고 불리는, 실제로 의사 선택기인 CSS 선택기가 있습니다.순수 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 규칙과 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>

css를 사용하여 html을 이렇게 작성할 수 있습니까?

예, 가능하지만 의사 선택기를 사용해야 합니다(다만 지원이 제한되어 있음).).

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

대부분의 위 코드는 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>

n번째 자식(홀수/짝수) 선택기를 사용할 수 있지만 모든 브라우저(즉, 6-8, ff v3.0)가 이러한 규칙을 지원하는 것은 아닙니다. 따라서 대부분의 솔루션이 호환되지 않는 브라우저의 행에 클래스를 추가하여 타이거 스트라이프 효과를 얻을 수 있는 일부 형식의 javascript/jquery 솔루션으로 돌아갑니다.

이것을 PHP로 하는 꽤 쉬운 방법이 있습니다. 제가 당신의 질문을 이해한다면 당신이 PHP로 코딩하고 CSS와 자바스크립트를 사용하여 출력을 향상시키고 있다고 가정합니다.

데이터베이스의 동적 출력은 결과를 반복하기 위해 for loop을 운반한 다음 테이블에 로드합니다.다음과 같이 기능 호출을 추가하면 됩니다.

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를 가지고 장난치는 것보다 훨씬 쉽습니다.

도움이 되길 바랍니다.

WebView용 html 파일에서 사용할 수 있습니다.

<head>
    
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
          
        th, td {
            text-align: left;
            padding: 8px;
        }
          
        tr:nth-child(even) {
            background-color: Lightgreen;
        }
    </style>
</head>

교대 행 선택기

다음은 모듈로를 사용하여 여러 가지 다른 색의 행을 번갈아 사용하는 방법입니다(여기서는 3).

ol>li:nth-child(3n+1) {
  background-color: blue;
}

ol>li:nth-child(3n+2) {
  background-color: green;
}

/* The following selector is equivalent to "nth-child(3n)" */
ol>li:nth-child(3n+3) {
  background-color: red;
}
<ol>
  <li />
  <li />
  <li />
  <li />
  <li />
  <li />
  <li />
  <li />
  <li />
</ol>

이미 설명한 대로 선택기에 사용되는 행 인덱스는 1(0이 아닌)부터 시작합니다.서 1,4,7입니다.nth-child(3n+1).

셀렉터의 판독 방법

셀렉터nth-child(Mn+k)한 줄의 색인에 대하여i로 읽음if (i % M == k). 예를 들어, 만약 우리가 기본 3 modulo가 2인 모든 행을 선택하고 싶다면, 우리는 CSS에 쓸 것입니다.nth-child(3n+2), 다른 (jav스크립트) 단어에서 셀렉터는 다음을 수행합니다.

const M = 3;
const k = 2;

for (let i = 1; i < 10; i+=1){
    // The `nth-child(Mn+k)` selector: 
    if (i % M == k){
        console.log(`${i} selected`);
    }
}

산출물

2 selected
5 selected
8 selected

언급URL : https://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css

반응형

'programing' 카테고리의 다른 글

테이블을 분할하기에 좋은 크기(행 수)는 무엇입니까?  (0) 2023.10.19
표에서 값이 연속적으로 발생한 횟수  (0) 2023.10.19
PowerShell 7을 기본값으로 설정하고 다른 버전을 제거하는 방법  (0) 2023.10.19
JSP/Servlet 및 Ajax를 사용한 간단한 계산기  (0) 2023.10.19
'System'을(를) 구현하지 않으므로 컬렉션 초기화기로 유형 '을(를) 초기화할 수 없습니다.소장품.IE 수 많은'  (0) 2023.10.19

'programing'의 다른글

  • 현재글CSS를 사용한 대체 테이블 행 색상?

관련글

댓글

티스토리툴바