Development Tip

표의 첫 번째 열 스타일을 다르게 지정

yourdevel 2020. 12. 10. 21:23
반응형

표의 첫 번째 열 스타일을 다르게 지정


table두 개의 열 이있는 경우 s padding의 첫 번째 열에 만 적용되도록 a 또는 다른 CSS를 지정하는 방법은 무엇 <td>입니까? 또한 n 번째 열의 스타일 도 비슷하게 어떻게 지정합니까?


n 번째 자식 선택기를 사용할 수 있습니다 .

n 번째 요소를 타겟팅하려면 다음을 사용할 수 있습니다.

td:nth-child(n) {  
  /* your stuff here */
}

( n1 에서 시작)


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

반응형