html - 表格有序列表

Question

我需要制作一个有序列表，其中包含呈现如下内容的表格内容:

1. Winner         00:00
2. Runner up      00:00
3. Looser         00:00

现在，我已经设法使用以下 HTML 完成此操作:

<ol>
    <li><dl><dt>Winner</dt><dd>00:00</dd></dl></li>
    <li><dl><dt>Runner up</dt><dd>00:00</dd></dl></li>
    <li><dl><dt>Looser</dt><dd>00:00</dd></dl></li>
</ol>

和 CSS:

dt {
    display: inline-block;
    width:   5em;
}
dd {
    display: inline-block;
}

在最新的 Chrome、Safari 和 Firefox 中正确呈现。我不知道 IE。

但是，感觉不对。是否有更语义化的方法来仅使用 HTML 和 CSS 来解决这个问题？

Answer 1

就 CSS 语义而言，这绝对不是一件好事。 (一方面，我似乎无法让它在 chrome 中工作)。因为这是表格数据，所以应该放在表格中。至于自动递增，你可以使用 css count 属性:

Demo

table{counter-reset:number;}

table tr td:first-child:before
{
    counter-increment:number;
    content:counter(number) ". ";
}