CSS 테이블 번호 붙이기

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 같이 보기

• CSS 번호 붙이기 counter-increment