๐ก ์ด๊ธฐ์ธํ
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
width: 600px;
}
th,
td {
border: 1px solid #ccc;
padding: 10px;
}
<table>
<tr>
<th>๋ฒํธ</th>
<th>์ ๋ชฉ</th>
<th>์ด๋ฆ</th>
<th>๋ ์ง</th>
</tr>
<tr>
<td>1</td>
<td>์ค๋ ๋ ์จ๊ฐ ์ฐธ์ผ๋ก ์ข์ต๋๋ค.</td>
<td>ํ๊ธธ๋</td>
<td>2012-03-05</td>
</tr>
<tr>
<td>2</td>
<td>์ค๋ ๋ ์จ๊ฐ ์ฐธ์ผ๋ก ์ข์ต๋๋ค.</td>
<td>ํ๊ธธ๋</td>
<td>2012-03-05</td>
</tr>
<tr>
<td>3</td>
<td>์ค๋ ๋ ์จ๊ฐ ์ฐธ์ผ๋ก ์ข์ต๋๋ค.</td>
<td>ํ๊ธธ๋</td>
<td>2012-03-05</td>
</tr>
<tr>
<td>4</td>
<td>์ค๋ ๋ ์จ๊ฐ ์ฐธ์ผ๋ก ์ข์ต๋๋ค.</td>
<td>ํ๊ธธ๋</td>
<td>2012-03-05</td>
</tr>
</table>
๐ก ํ
์ด๋ธ ์ฒ๋ฆฌ
- ํ ๋จ์๋ก ์ก๋ ๋ฐฉ๋ฒ (odd:ํ์, even:์ง์)
table tr:nth-child(odd) {
background: #eee;
}
table tr:nth-child(even) {
background: rgb(245, 209, 209);
}
table tr:first-child {
background: orange;
}
table tr:nth-of-type(odd) {
background: red;
}
table tr:nth-of-type(even) {
background: gray;
}
- ์ด ๋จ์๋ก ์ก๋ ๋ฐฉ๋ฒ = nth-child์ nth-of-type ๋ชจ๋ ์ฌ์ฉ ๊ฐ๋ฅ!
table td:nth-child(4n) {
background: grey;
}
table td:nth-child(4n) {
background: grey;
}
table td:nth-child(4n + 1) {
background: darkcyan;
}
table td:nth-child(4n + 2) {
background: darkolivegreen;
}
table td:nth-child(4n + 3) {
background: darkgoldenrod;
}