首页 > html > counter > CSS Property Value - 如何用counter(rowNumber)索引表行

CSS Property Value - 如何用counter(rowNumber)索引表行

counter 【counter】
我们想知道如何用counter(rowNumber)索引表行。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {
  counter-reset: rowNumber;
}

table tr {
  counter-increment: rowNumber;
}

table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}
</style>
</head>
<body>
  <table border="1">
    <tr>
      <td>blue</td>
    </tr>
    <tr>
      <td>red</td>
    </tr>
    <tr>
      <td>black</td>
    </tr>
  </table>
</body>
</html>