Programming

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

procodes 2020. 7. 19. 17:18
반응형

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


css 만 사용하면 테이블의 두 번째 열만 CSS를 재정의하는 방법은 무엇입니까?

다음을 사용하여 모든 열에 도달 할 수 있습니다.

.countTable table table td

내 사이트가 아니기 때문에이 페이지의 html로 이동하여 수정할 수 없습니다.

감사.


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

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

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


이 시도:

.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 */

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

일반적인 경우 :

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

background:red

}

너의 경우:

.countTable table table td + td{ 

background: red

}

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


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

<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>

이 웹 http://quirksmode.org/css/css2/columns.html 에서 그 쉬운 방법을 찾았습니다.

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..

참고 URL : https://stackoverflow.com/questions/2535112/using-css-how-to-change-only-the-2nd-column-of-a-table

반응형