표 본문 사이의 색상을 번갈아 가며 어떻게 할 수 있습니까? CSS
그리고 루비오
행이 번갈아 가며 큰 테이블이 있습니다. 행의 td 값 중 하나에는 중첩 테이블이 있습니다. 중첩 테이블의 색상을 해당 행과 일치시키고 싶습니다. 따라서 첫 번째 행이 파란색 행이고 두 번째 행이 흰색 행인 경우 파란색 행의 테이블은 파란색이고 흰색 행의 테이블은 흰색입니다.
nth-child (number) 선택자를 참조하는 포럼의 몇 가지 게시물을 살펴 보았습니다. 그러나 항상 해당 행이있는이 선택기를 봅니다. 나는 그것을 테이블 및 테이블 본문으로 구현하려고 시도했지만 운이 없었습니다. 여기 내가 시도한 것입니다.
.table.unstyled table:nth-child(n) tbody tr td
:border none
:background-color blue
.table.unstyled table tbody:nth-child(n) tr td
:border none
:background-color blue
지금까지는 운이 좋지 않았지만 테이블 자체를 잡고 배경색을 변경하는 방법이 있는지 궁금합니다. 그건 그렇고 나는 Sass를 사용하고 있습니다.
-----편집하다--------
이것은 내가하려는 일의 의사 코드입니다. 혼란 스러울 수 있도록 대규모 응용 프로그램에서 작업 중입니다. 여기에 간다 :
<table>
<thead>
<tr>
<th> Name
<th> Date
<th> Email
<th> Address
<th> Gender
<tbody>
-a ruby loop that goes through a bunch of items-
<tr>
<td> Name Stats
<td> Date Stats
<td> Email Stats
<td> Address Stats
<td>
<table>
<tbody>
<tr>
<td> Some gender stats
<td> Even gender more stats
<tr>
<td> Other gender Stuff
<td> Even more gender Stuff
그것은 내 의사 코드입니다. 생성 된 첫 번째 행은 회색 행이고 두 번째 행은 흰색이며 반복 및 반복됩니다. 내가 필요한 것은 성별 통계 아래에있는 테이블을 가져 와서 각 행의 색상과 일치시키는 것입니다. 이제 내가 가지고있는 것은 중첩 테이블의 첫 번째 행이 회색이고 두 번째 행이 흰색입니다. 전체 테이블이 회색이거나 흰색이어야합니다. 도움이 되나요?
----편집하다----
이것이 여전히 불분명 한 경우를 대비하여. 이 스크린 샷을 참조하십시오.
이러한 행 내의 중첩 테이블 자체가 교대로 스트라이프되는 방식을 확인하십시오. 두 번째 테이블은 각 행과 일치하는 흰색 인 반면 첫 번째 행의 중첩 테이블은 회색이어야합니다. 도움을 주시면 감사하겠습니다.
DRD
CSS 코드에서 공백 / 하위 연산자를 사용하고 있습니다. 대신 직접 자식 ( >) 연산자를 사용 하여 첫 번째 tbody. 여기 바이올린이 있습니다 : http://jsfiddle.net/mnvrozvb/ . 중첩 테이블은 조상의 배경색을 상속합니다.
HTML :
<table>
<tr>
<td>#1</td>
<td>Some text</td>
<td>
<table>
<tr>
<td>3.23</td>
<td>3.22</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>#2</td>
<td>More text</td>
<td>
<table>
<tr>
<td>3.23</td>
<td>3.22</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>#3</td>
<td>Paragraph</td>
<td>
<table>
<tr>
<td>Stat</td>
<td>Stat</td>
</tr>
</table>
</td>
</tr>
</table>
CSS :
body > table > tbody > tr:nth-of-type(odd) {
background-color: teal;
}
body > table > tbody > tr:nth-of-type(even) {
background-color: orange;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
드롭 다운 메뉴에 모든 링크가 표시되지 않으며 CSS 소셜 미디어 아이콘 색상을 변경할 수 없습니다.
- 2
하나의 값 대신 값을 삽입 할 때 두 개의 다른 문자를 번갈아 가도록이 for 루프를 어떻게 변경할 수 있습니까?
- 3
기본 요소 색상 Android 레이아웃을 어떻게 변경할 수 있습니까?
- 4
이 다트 화살표 함수는 어떻게 본문에 문장을 가질 수 있습니까?
- 5
방문한 cgridview 행의 색상을 어떻게 변경할 수 있습니까?
- 6
임의의 JTree 노드가 이름을 잘못 표시하는 원인은 무엇이며 어떻게 발생하지 않도록 할 수 있습니까?
- 7
R에 두 그룹이있을 때 두 표본 t- 검정을 어떻게 사용할 수 있습니까?
- 8
잠재적으로 인용 될 수있는 검색어 줄을 어떻게 구문 분석 할 수 있으며, 이러한 검색어를 사용하여 각 검색어가 모두 포함 된 입력 줄을 일치시킬 수 있습니까?
- 9
Flutter의 합계 문제가 작동하지 않습니다. 내비게이션 바에 총 수입을 어떻게 표시 할 수 있습니까?
- 10
문자열을 어떻게 표시 할 수 있습니까?
- 11
현재 사용자의 이름을 어떻게 표시 할 수 있습니까?
- 12
CSS로 png 아이콘 모음을 어떻게 설정할 수 있습니까?
- 13
배경색이있을 때 선택 상자 화살표를 어떻게 변경할 수 있습니까?
- 14
파이썬을 사용하여 문자열의 모든] 뒤에 쉼표를 어떻게 추가 할 수 있습니까?
- 15
이 알림 표시 줄은 무엇이며 어떻게 내 앱에 추가 할 수 있습니까?
- 16
CSS에서 if 문을 어떻게 할 수 있습니까?
- 17
무료 가상 머신을 어떻게 사용할 수 있으며 VirtualBox는 어떻게 작동합니까?
- 18
공유 기본 설정의 추상적 인 표현을 사용할 수 있도록 dagger 2를 어떻게 사용할 수 있습니까?
- 19
투명한 배경과 흰색 테두리가있는 아이콘을 어떻게 표시 할 수 있습니까?
- 20
사용자가 표시 할 문자열을 입력 할 수있는 switch 문에 case를 어떻게 가질 수 있습니까?
- 21
CLI conky 디스플레이에서 ANSI 색상을 어떻게 표시 할 수 있습니까?
- 22
JavaScript를 사용하여 BG 색상을 변경하면 CSS .hover를 어떻게 사용할 수 있습니까?
- 23
OHLC 차트에서 막대 그림의 기본 색상을 어떻게 수정할 수 있습니까?
- 24
내 select2 선택 상자에서 선택한 아이콘을 어떻게 표시 할 수 있습니까?
- 25
사용중인 전환 요소에서 밑줄 색상을 어떻게 변경할 수 있습니까? (CSS)
- 26
이 경우 Drake가 관절 제한을 준수하고 있으며 어떻게 확인할 수 있습니까?
- 27
이 경우 Drake가 관절 제한을 준수하고 있으며 어떻게 확인할 수 있습니까?
- 28
vifm 색상 표를 어떻게 변경할 수 있습니까?
- 29
웹 사이트를 방문 할 때 내 CSS 스타일을 어떻게 강제 할 수 있습니까?
몇 마디 만하겠습니다