표의 첫 번째 열 스타일을 다르게 지정
table
두 개의 열 이있는 경우 s padding
의 첫 번째 열에 만 적용되도록 a 또는 다른 CSS를 지정하는 방법은 무엇 <td>
입니까? 또한 n 번째 열의 스타일 도 비슷하게 어떻게 지정합니까?
n 번째 자식 선택기를 사용할 수 있습니다 .
n 번째 요소를 타겟팅하려면 다음을 사용할 수 있습니다.
td:nth-child(n) {
/* your stuff here */
}
( n
1 에서 시작)
IE7을 지원해야하는 경우 더 호환되는 솔루션은 다음과 같습니다.
/* only the cells with no cell before (aka the first one) */
td {
padding-left: 20px;
}
/* only the cells with at least one cell before (aka all except the first one) */
td + td {
padding-left: 0;
}
또한 잘 작동합니다 li
; 일반적인 형제 선택자는 ~
제목 h1 다음에 단락과 부제목, 그리고 다른 단락과 같은 혼합 요소에 더 적합 할 수 있습니다.
이것이 도움이 될 것입니다. CSS3 : first-child에서 tr
스타일을 지정하려는 첫 번째 테이블을 말해야합니다 . http://reference.sitepoint.com/css/pseudoclass-firstchild
: n 번째 자녀 () 와 : n 번째의 형 () 의사 클래스는 수식을 가진 요소를 선택할 수 있습니다.
구문은 : nth-child (an + b)입니다 . 여기서 a와 b를 원하는 숫자로 바꿉니다.
예를 들어 : nth-child (3n + 1)는 1 번째, 4 번째, 7 번째 등 자식을 선택합니다.
td:nth-child(3n+1) {
/* your stuff here */
}
: nth-of-type () 은 주어진 유형의 요소 만 고려한다는 점을 제외하면 동일하게 작동합니다 (예제에서).
테이블의 첫 번째 열을 선택하려면이 구문을 사용할 수 있습니다.
tr td : nth-child (1n + 2) {padding-left : 10px;}
참고 URL : https://stackoverflow.com/questions/15675097/style-the-first-td-column-of-a-table-differently
'Development Tip' 카테고리의 다른 글
개발 및 프로덕션에서 다른 Procfile 사용 (0) | 2020.12.10 |
---|---|
Passport로 Supertest 요청을 인증하는 방법은 무엇입니까? (0) | 2020.12.10 |
Code :: Blocks 컴파일러에 C ++ 11 지원을 추가하려면 어떻게해야합니까? (0) | 2020.12.10 |
Java에서 HashMap 키 및 값 반전 (0) | 2020.12.10 |
어설 션이 함수가 아닌 매크로 인 이유는 무엇입니까? (0) | 2020.12.10 |