Question

我需要在HTML文档中添加表格编号，并且更喜欢使用CSS。我知道我们可以添加图号等，但我找不到以这种格式向表中添加数字的方法＆＃34;表-1和＃34;所以它出现在桌子前面。

以下是我的代码，但是将表格编号放在表格后面。

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

.. ..

Answer 1

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

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

<强> jsFiddle example

使用CSS进行表自动编号

1 个答案: