在有序列表中嵌入 html 表格会导致错位答案

【问题标题】：Embedding a html table in an ordered list causes misalignment在有序列表中嵌入 html 表格会导致错位
【发布时间】：2021-03-29 01:51:17
【问题描述】：

我正在尝试创建一个嵌入在表格中的反向排序列表，因此每个列表项都是表格行。这样我就可以有一个带有单独列的编号表。以下代码会执行此操作，但会导致编号未对齐的问题。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <h3><b><u>2020</u></b></h3>
    <table cellpadding="6">
    <ol reversed>
        <li>
          <tr>
            <td style="vertical-align: baseline;"><p>Testing</p></td>
            <td style="vertical-align: baseline;"><p>testing 2</p></td>
          </tr>
        </li>

        <li>
          <tr>
            <td style="vertical-align: baseline;"><p>Testing</p></td>
            <td style="vertical-align: baseline;"><p>testing 2</p></td>
          </tr>
        </li>

        <li>
          <tr>
            <td style="vertical-align: baseline;"><p>Testing</p></td>
            <td style="vertical-align: baseline;"><p>testing 2</p></td>
          </tr>
        </li>
        </ol>
        </table>
  </body>
</html>

将此与每个单元格是其自己的表格时的标准行为进行比较（我不想要）

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <h3><b><u>2020</u></b></h3>
    <ol reversed>
        <li>
          <table cellpadding="6">
          <tr>
            <td style="vertical-align: baseline;"><p>Testing</p></td>
            <td style="vertical-align: baseline;"><p>testing 2</p></td>
          </tr>
          </table>
        </li>

        <li>
          <table cellpadding="6">
          <tr>
            <td style="vertical-align: baseline;"><p>Testing</p></td>
            <td style="vertical-align: baseline;"><p>testing 2</p></td>
          </tr>
          </table>
        </li>

        <li>
          <table cellpadding="6">
          <tr>
            <td style="vertical-align: baseline;"><p>Testing</p></td>
            <td style="vertical-align: baseline;"><p>testing 2</p></td>
          </tr>
          </table>
        </li>

        </ol>
  </body>
</html>

如何使用第一个 sn-p 的行为修复编号？谢谢！

【问题讨论】：

标签： html css html-table html-lists

【解决方案1】：

试试这个

table {
   counter-reset:numbers 4;
}

tr {
  counter-increment: numbers -1;
}

tr:before {
  content: counter(numbers) ". "; 
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <h3><b><u>2020</u></b></h3>
    <table cellpadding="6">
          <tr>
            <td style="vertical-align: baseline;"><p>Testing</p></td>
            <td style="vertical-align: baseline;"><p>testing 2</p></td>
          </tr>

          <tr>
            <td style="vertical-align: baseline;"><p>Testing</p></td>
            <td style="vertical-align: baseline;"><p>testing 2</p></td>
          </tr>


          <tr>
            <td style="vertical-align: baseline;"><p>Testing</p></td>
            <td style="vertical-align: baseline;"><p>testing 2</p></td>
          </tr>

        </table>
  </body>
</html>

【讨论】：

try this + code only anwsers 被认为是低质量的。请说明问题和您的解决方案。在大多数情况下，没有解释的代码 sn-p 几乎毫无价值。它无助于理解问题，并且难以重现解决方案。
大家好，有人可以告诉我如何包含运行 sn-p 功能吗？我点击导航栏上的 sn-p 图标，然后它会弹出一个窗口，其中包含要包含的编程语言，我如何从那里继续？
@Mrvs，支持您的 CSS 代码来控制行计数器。我从中学到了很多东西。

【解决方案2】：

您不能像这样混合使用表格和列表。您可以拥有表格或有序列表的语义，但不能混合使用。另一方面，在符合 HTML 有效性的同时，让自动反向编号从正确的数字开始倒数到 1 是很棘手的。我们可以像这样在每一行的开头添加样式列表项作为额外的单元格。

li {
  display: contents;
}
tr::before {
  display: list-item;
  content: '';
}

<h3><b><u>2020</u></b></h3>
<ol reversed>
  <li>
    <table cellpadding="6">
      <tr>
        <td style="vertical-align: baseline;"><p>Testing</p></td>
        <td style="vertical-align: baseline;"><p>testing 2</p></td>
      </tr>

      <tr>
        <td style="vertical-align: baseline;"><p>Testing</p></td>
        <td style="vertical-align: baseline;"><p>testing 2</p></td>
      </tr>

      <tr>
        <td style="vertical-align: baseline;"><p>Testing</p></td>
        <td style="vertical-align: baseline;"><p>testing 2</p></td>
      </tr>
    </table>
  </li>
</ol>

CSS 中有proposals for creating auto start value reversed counters，但还没有实现，所以我们要么需要这个相当笨拙且无语义的 ol[reversed]/li 包装器，要么必须手动将计数器开始设置为表格行数 + 1，如根据 Mrvs 的回答。

【讨论】：

另外，您可以使用一组 nth-last-child 规则，其规则足以覆盖所有可能的行数。不干净，不优雅，但如果行数有限制，则可行