[CSS] 테이블에 넘버링해주기(counter-reset)

counter-reset

BROWSER SUPPORT (more…)

IE8+	FF1+	SA3.1+	OP9.2+	CH2+
FULL	FULL	FULL	FULL	FULL

Album	Year
The Raging Wrath of the Easter Bunny	1986
Bowel of Chiley	1987
Goddammit I Love America	1988
OU818	1989
Mr. Bungle	1991
Disco Volante	1995
California	1999

html

  

    

      
Album
      
Year
    
  
  

    

      
The Raging Wrath of the Easter Bunny
      
1986
    
    

      
Bowel of Chiley
      
1987
    
    

      
Goddammit I Love America
      
1988
    
    

      
OU818
      
1989
    
  
  

    

      
Mr. Bungle
      
1991
    
    

      
Disco Volante
      
1995
    
    

      
California
      
1999
    
  

css

/* here's counter-reset in action */
table{
  counter-reset:group;
}
tbody{
  counter-increment:group;
  counter-reset:row;
}
tbody tr{
  counter-increment:row;
}
tbody td:first-child:before{
  content:counter(group, upper-latin) "." counter(row) " - ";
}

/* this is to make the demo look pretty */

td, th{
  font-family:sans-serif;
  text-align:left;
  padding:2px 5px;
}