CSS를 사용하여 표의 두 번째 열만 변경하는 방법


126

CSS 만 사용하여 테이블의 두 번째 열만 CSS를 재정의 할 수 있습니다.

다음을 사용하여 모든 열에 액세스 할 수 있습니다.

.countTable table table td

이 페이지가 내 사이트가 아니기 때문에 수정하기 위해이 페이지의 html에 액세스 할 수 없습니다.

감사.

css 

답변:


239

다음 :nth-child과 같이 의사 클래스를 사용할 수 있습니다 .

.countTable table table td:nth-child(2)

하지만 이전 브라우저 (또는 IE)에서는 작동하지 않습니다.이 경우 셀에 클래스를 제공하거나 자바 스크립트를 사용해야합니다.


이것은 각 행의 두 번째 셀이 아니라 각 테이블의 두 번째 셀만 제공합니다. .countTable table table tr td : nth-child (2)가 필요합니다
Deeksy

3
@Deeksy-정확하지 않습니다. 선택자가 무엇인지 상관하지 않습니다. nth-child요소를 찾은 후 적용 nth되며 선택자에 있는지 여부에 관계없이 어떤 부모와 비교됩니다. 여기에서 작동하는 것을 볼 수 있습니다. jsfiddle.net/JQQPz
Nick Craver

td : nth-child (2) 내부 요소의 CSS 만 변경하는 것은 어떻습니까? <a> 태그처럼. td a : nth-child (2) {}가 될까요?
Ivo San

1
@ ivory-santos는 그 요소 아래의 스타일 링크 a와 같이 끝에 추가합니다 td:nth-child(2) a.
Nick Craver

아래 다른 답변과 달리 테이블이 두 번있는 이유는 무엇입니까?
UlFie 19

26

이 시도:

.countTable table tr td:first-child + td

다른 열의 스타일을 지정하기 위해 반복 할 수도 있습니다.

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */

1
나는 코드를 유지하는 사이트의 소유자가 개발자가 아닌 상황에서 이것을 선택했고 이것은 그들에게 데이터 테이블의 열 정렬을 매우 간단하게 변경할 수있는 능력을 주었다. 여기에서 왼쪽에서 어느 열에 대한 선택기 블록인지 쉽게 알 수 있습니다. 다시 한 번 가장 우아하고 효율적인 방법은 아니지만 작동했습니다!
Eric Bishard

18

테이블의 두 번째 열만 변경하려면 다음을 사용하십시오.

일반적인 경우 :

table td + td{  /* this will go to the 2nd column of a table directly */

background:red

}

너의 경우:

.countTable table table td + td{ 

background: red

}

참고 : 이것은 모든 브라우저 (최신 및 이전 브라우저)에서 작동하므로 이전 질문에 대한 답변을 추가했습니다.


첫 번째 열을 선택하기위한 조정은 무엇입니까? 테이블 td {...}를 사용하면 다른 열의 모든 셀도 선택됩니다.
j4v1

1
@ j4v1 테이블 TD는 {배경 : 빨강;} // 첫 번째 열은 빨간색 배경 테이블 TD + TD해야합니다 {배경 : 파란색;} // 나머지는 블루 것이다
Abzoozy

-2

두 번째 열의 각 셀에 대해 클래스를 지정할 수 있습니다.

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>

나는 이것을 사용할 수 없습니다. 내가 말했듯이 이것은 내 페이지가 아니므로 html을 변경할 수 없습니다.

2
@Duniyadnd 이것은 기존의 선택기 사용 방법에 비해 좋은 접근 방식이 아닙니다.
PM

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.