在有序列表中显示表格的最佳做法

问题描述

我正在尝试找到编码以下页面布局示例的最佳方法，该示例在有序列表中显示全角表格。通常，我可以作弊并使用两个项目符号列表，并且在它们之间有一个表，但是现在的要求是使用一个有序列表，并在表仍在列表项内时继续编号：

如您所见，H1下方的所有内容均以空白间距缩进，除了表格位于第二和第三列表项之间。

我的主要问题： 由于我们不能在 OL 之间放置 DIV 和 TABLE 和 LI 标记，在保持适当的HTML列表布局标准的同时，编写此布局的正确方法是什么？

我的错误代码：

<h2>heading 2</h2>
<p></p>
<ol>
  <li></li>
  <li></li>
  <div class="table-container">
    <table>
      <tr>
        <td>
          ...
        </td>
      </tr>
    </table>
  </div>
  <li></li>
  <li></li>
</ol>

谢谢！

解决方法

关闭列表的第一部分，放置表格，使用start="3"开始新列表以恢复编号：

.table-container table {
  border: 1px solid;
  border-collapse: collapse;
  width: 100%;
}
.table-container table td {
  border: 1px solid;
}

    <h2>Heading 2</h2>
    <p>Lorem ipsum</p>
    <ol>
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
    </ol>
    <div class="table-container">
    <table width="100%">
      <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Baz</td>
      </tr>
      <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Baz</td>
      </tr>
    </table>
    </div>
    <ol start="3">
      <li>Lorem ipsum</li>
      <li>Lorem ipsum</li>
    </ol>