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>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>
nth-child (odd / even) 선택기를 사용할 수 있지만 모든 브라우저 ( 예 : 6-8, ff v3.0 )가 이러한 규칙을 지원하는 것은 아니므로 대부분의 솔루션이 클래스를 추가하기 위해 일부 형태의 javascript / jquery 솔루션으로 대체되는 이유 이러한 비 호환 브라우저의 행은 호랑이 줄무늬 효과를 얻습니다.
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를 사용하는 것보다 훨씬 쉽습니다.
도움이 되었기를 바랍니다.
참고 URL : https://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css
'Programming' 카테고리의 다른 글
| 배쉬에서 숫자 비교 (0) | 2020.02.17 |
|---|---|
| 안드로이드 : 보이지 않는 것과 사라진 것의 차이점은 무엇입니까? (0) | 2020.02.17 |
| APK 설치시 INSTALL_FAILED_NO_MATCHING_ABIS (0) | 2020.02.17 |
| 클래스와 인스턴스 메소드의 차이점은 무엇입니까? (0) | 2020.02.17 |
| Git을 현재 디렉토리로 복제하는 방법 (0) | 2020.02.17 |