CSS를 사용하여 표 자동 번호 매기기

Question

내 HTML 문서에 표 번호를 추가하고 CSS를 사용하는 것이 좋습니다. 우리는 그림 번호 등을 추가 할 수 있지만, "표 - 1"형식으로 표에 번호를 추가하여 표 앞에 표시 할 수있는 방법을 찾을 수 없다는 것을 알고 있습니다.

다음은 내 코드이지만 테이블 머리 다음에 테이블 번호를 넣습니다.

HTML :

<table class="table-bordered table-hover"> 
    <thead> 
     <tr> 
     <th scope="col">Cell 1 Head</th> 
     <th scope="col">Cell 2 Head</th> 
     <th scope="col">Cell 3 Head</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Praesent ac risus malesuada</td> 
     <td>sapien quis</td> 
     <td>eget ipsum</td> 
     </tr> 
    </tbody> 
    </body> 
    </html> 

CSS :

table{ 
    counter-reset:section 1; 
} 

table:before{ 
    content:"Table - " counter(section); 
    } 

출력 :

---

| 셀 1 헤드 | | 셀 2 헤드 | | 셀 2 헤드 |

---

표 -

1

---

... ..

Answer 1

당신은 당신의 테이블에 캡션 요소 <caption></caption>을 추가 한 다음이 CSS 사용할 수 있습니다

body { 
    counter-reset:section; 
} 
caption::before { 
    counter-increment: section; 
    content:"Table - " counter(section); 
} 

을 jsFiddle example