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

debugcn 发表于 Dev

政权

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

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

我的主要问题：由于我们不能在OL和LI标记之间放置DIV和TABLE，因此在保持适当的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。