[CSS]
first-child, last-child, nth-child() 활용
2016-03-07
<style>
.tbl1{
border:1px solid black;
border-collapse:separate;
border-spacing: 5px;
}
.tbl1 td{
border:1px solid black;
padding:5px;
}
.tbl1 tr:first-child td{
border-top-width:2px;
}
.tbl1 tr:first-child td{
border-top-width:3px;
}
.tbl1 tr:nth-child(2) td{
border-left:3px solid red;
}
.tbl1 tr:nth-child(5) td{
border-right:3px dotted black;
}
.tbl1 td:last-child{
border-bottom:3px solid blue;
}
.tbl1 tr:nth-child(4) td:nth-child(3){
border:5px solid orange;
}
.tbl1 tr:nth-child(3) td:nth-child(2){
border:5px solid orange;
}
.tbl1 tr:nth-child(3) td:nth-child(4){
border:5px solid orange;
}
</style>
<table class='tbl1'>
<tr>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
</tr>
<tr>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
</tr>
<tr>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
</tr>
<tr>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
</tr>
<tr>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
</tr>
<tr>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
<td>--------</td>
</tr>
</table>
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |
-------- |