Question

我的网站上有一个排行榜，我希望能够将排名数字（1,2,3,4,5等）用作......

<ol>
<li>this</li>
<li>that</li>
</ol>

...在表格中不起作用

我该怎么做？

Answer 1

实现这一目标的一种方法，给出以下结构：

<table>
    <thead>
        <tr>
            <th>Rank:</th>
            <th>Name:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="rank"><span></span></td>
            <td>Him</td>
        </tr>
        <tr>
            <td class="rank"><span></span></td>
            <td>Her</td>
        </tr>
    </tbody>
</table>

是否使用CSS计数器：

table {
    border: 1px solid #ccc;
    empty-cells: show;
    width: 40%;
    counter-reset: ranking;
}

th {
    border-bottom: 2px solid #ccc;
    min-width: 4em;
    width: 50%;
    max-width: 6em;
}
tbody tr {
    counter-increment: ranking;
}
td {
    border-bottom: 1px solid #ccc;
}
td.rank > span:before {
    content: counter(ranking);
}

和JS Fiddle demo。

如其他地方所述，但这些并未得到广泛支持。只需使用ol，就可以使用JS / jQuery 或更好地实现。

Answer 2

您可以使用CSS计数器

执行此操作

......不幸的是，他们还没有被广泛支持。最好在服务器端生成数字，可以说它们是重要的内容，并且应该是HTML格式。

Answer 3

只需将其添加到您的CSS：

ol {
list-style-type: decimal;
margin-left:12px;
}

的jsfiddle： http://jsfiddle.net/Mutant_Tractor/zhCzQ/2/

或者您也可以使用list-style-type: decimal-leading-zero;

Answer 4

我担心表中的行编号是标准的html功能。您需要使用Javascript或服务器端生成数字。

编辑：

你真的应该通过（按照优先顺序）这样做：

CSS编号（参见其他答案）
服务器端（我不做php - 对不起）

客户端javascript应该是最后的手段：

    <table id="numbered">
      <tr>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>c</td>
        <td>d</td>
      </tr>
      <tr>
        <td>e</td>
        <td>f</td>
      </tr>
    </table>

    <script type="text/javascript">
    var table=document.getElementById('numbered');
    var tr=table.getElementsByTagName('tr');
    for(var i=0; i<tr.length; i++)
    {
        var td=tr[i].getElementsByTagName('td');
        td[0].insertBefore(document.createTextNode(i+1+'. '), td[0].firstChild);
    }
    </script>

Answer 5

至于我，我在while循环中使用while循环（对于php）如果你想从数据库中获取数据。防爆。

        $query = mysql_query("SELECT * FROM table);
        $getnumbers = mysql_num_rows($query);

    $x=1; //initialize your number
  while($x<=$getnumbers)
    {
          while($rows = mysql_fetch_assoc($query))
          {

            echo $x;echo $row["row1"];echo "<br>";
          $x++ }
    }

如何在表中创建数字列表

5 个答案: