728x90
반응형
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>예제</title>
<style>
/* 예제 1 - td 첫번째 자식요소만 적용됨 */
table tbody tr td:first-child {
background-color: #ddd;
}
/* 예제 2 - td 첫번째 자식요소를 제외한 나머지 td들이 적용됨 */
table tbody tr td:not(:first-child) {
background-color: #ddd;
}
</style>
</head>
<body>
<table border=1>
<thead>
<tr>
<td>번호</td>
<td>이름</td>
<td>나이</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>가나다</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>라마바</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>자차카</td>
<td>40</td>
</tr>
</tbody>
</table>
</body>
</html>
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] box-shadow 박스 그림자 효과 (0) | 2021.04.12 |
|---|---|
| [CSS] 머티리얼 아이콘 material-icons 구글 웹폰트 (0) | 2021.02.09 |
| [CSS] scroll css (스크롤 디자인) (0) | 2020.06.24 |
| [CSS] html 테이블 헤더 고정 (table thead 고정) tbody 스크롤(scroll) (0) | 2020.05.12 |
| [CSS] table width 고정 (0) | 2020.05.12 |