如何在Markdown/HTML表格中实现跨行连续编号的有序列表？

需求与问题 #

想要创建带连续编号的问题表单，预期效果如下：

QUESTIONS         |  ANSWERS          |
-------------------|-------------------|
1. First Question  |                   |
-------------------|-------------------|
2. Second Question |                   | 
-------------------|-------------------|
3. Third Question  |                   |
-------------------|-------------------|

尝试在表格每个单元格内单独使用<ol>标签实现编号，但每个独立的<ol>都会从1开始计数，导致编号重复：

QUESTIONS         |  ANSWERS          |
-------------------|-------------------|
1. First Question  |                   |
-------------------|-------------------|
1. Second Question |                   | 
-------------------|-------------------|
1. Third Question  |                   |
-------------------|-------------------|

解决方案 #

可以通过**CSS计数器（Counter）**实现跨行连续编号，替代每个单元格单独的有序列表，具体实现如下：

1. HTML结构 #

<table>
  <thead>
    <tr>
      <th>QUESTIONS</th>
      <th>ANSWERS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="question">First Question</td>
      <td></td>
    </tr>
    <tr>
      <td class="question">Second Question</td>
      <td></td>
    </tr>
    <tr>
      <td class="question">Third Question</td>
      <td></td>
    </tr>
  </tbody>
</table>

2. CSS样式 #

/* 表格基础样式 */
table {
  border-collapse: collapse;
  width: 600px;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

/* 初始化计数器 */
tbody {
  counter-reset: question-num;
}

/* 自动生成连续编号 */
.question::before {
  counter-increment: question-num;
  content: counter(question-num) ". ";
  font-weight: normal;
}

原理说明 #

• 利用counter-reset在<tbody>范围内初始化一个计数器，确保编号从1开始。
• 通过counter-increment让每个带.question类的单元格自动递增计数器值。
• 用content属性将计数器值以「数字.」的形式插入到问题文本前，实现连续编号效果。

这种方法避免了多个独立有序列表的编号冲突，同时结构更简洁易维护。

内容的提问来源于stack exchange，提问作者Shawn V. Wilson