1 개요[ | ]
- CSS 테이블 번호 붙이기
2 예시 1[ | ]
html
Copy
<style>
tbody>tr {
counter-increment: aaa;
}
tbody>tr>td:first-child:before {
content: counter(aaa) " ";
}
</style>
<table>
<thead>
<tr><th>no.</th><th>fruits</th></tr>
</thead>
<tbody>
<tr><td></td><td>apple</td></tr>
<tr><td></td><td>banana</td></tr>
<tr><td></td><td>cranberry</td></tr>
</tbody>
</table>
3 예시 2[ | ]
html
Copy
<style>
table { border-collapse:collapse; }
th, td { border:1px solid black; }
[class^=count-] tr {
counter-increment: mycounter;
}
[class^=count-] tr>td:first-child:before {
content: counter(mycounter) " ";
}
.count-1 tr:nth-child(1) { counter-reset: mycounter; }
.count-2 tr:nth-child(2) { counter-reset: mycounter; }
}
</style>
<table class='count-1'>
<tr><td></td><td>apple</td></tr>
<tr><td></td><td>banana</td></tr>
<tr><td></td><td>cranberry</td></tr>
</table>
<table class='count-2'>
<tr><th>no.</th><th>fruits</th></tr>
<tr><td></td><td>apple</td></tr>
<tr><td></td><td>banana</td></tr>
<tr><td></td><td>cranberry</td></tr>
</table>
<table class='count-1'>
<tr><td></td><td>apple</td></tr>
<tr><td></td><td>banana</td></tr>
<tr><td></td><td>cranberry</td></tr>
</table>
<table class='count-2'>
<tr><th>no.</th><th>fruits</th></tr>
<tr><td></td><td>apple</td></tr>
<tr><td></td><td>banana</td></tr>
<tr><td></td><td>cranberry</td></tr>
</table>
4 같이 보기[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.