使用CSS的表自动编号

Question

我需要在我的HTML文档中添加表号，并且更喜欢使用CSS。我知道我们可以添加数字等，但我无法找到一种方法将数字以这种格式"Table - 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磁头

表-1

。。。。

Answer 1

可以将标题元素<caption></caption>添加到表中，然后使用以下CSS：

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

jsFiddle实例