在有序列表中嵌入 html 表会导致未对齐

如何解决在有序列表中嵌入 html 表会导致未对齐

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

<!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>

如何使用第一个代码段的行为修复编号？谢谢！

解决方法

您不能像那样混合使用表格和列表。您可以拥有表或有序列表的语义，但不能混合使用。另一方面，在符合 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 的回答。

试试这个

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>