在 HTML 中将表格合并到表格中答案

【问题标题】：Incorporating a table inside a table in HTML在 HTML 中将表格合并到表格中
【发布时间】：2018-06-18 08:32:48
【问题描述】：

我正在尝试创建一个 HTML 表格，其中有四列和任意数量的行。在此表中，前两列只是普通单元格。后两列可以在顶级表中的一行内包含多行。我的问题是如何正确对齐列分隔符，即使每个单元格中内容的长度是可变的。

我的尝试尝试使用：

<td colspan=2>

我正在尝试做的示例：https://jsfiddle.net/hurnzhmq/

我在 JSFiddle 中缺少的东西是：

将 Content3A/Content4A 与 Content3B/Content4B 分开的两行之间没有分隔线 - 我尝试对最后一个子项使用“bottom-border:none”，但这似乎不起作用。
Content3A/Content3B 和 Content4A/Content4B 之间的列分隔符不与表头的列分隔符对齐，并且不接触表格的末端（有间隙）。

任何关于如何解决此问题的建议将不胜感激！

【问题讨论】：

你能把你的确切代码传递给你吗？还是来自 jsfiddle 的那些？

标签： html html-table jinja2

【解决方案1】：

我认为你应该使用 rowspan 而不是 colspan 你可以使用下面的代码

 <html>


     <table border=1 >

      <tr>
      <td>Header1</td>
      <td>Header2</td>
      <td>Header3</td>
      <td>Header4</td>
      </tr>

      <!-- Content -->
       <tr>
      <td rowspan="2">Content1</td>
      <td rowspan="2" >Content2</td>
      <td > Content3A</td>
      <td > Content2</td>
      </tr>
      <tr>

      <td > Content3B</td>
      <td > Content2</td>
    </tr>
  </table>
  </html>

【讨论】：

好的，所以它实际上比我之前解释的要复杂一些——我使用的是 Jinja2（HTML 模板），实际上是使用 for 循环生成 Content3A/3B/4A/4B。这意味着我只会在第 2、3、...、n 行之前有新的。我如何能够创建这些新行，而不为第一对创建新行？在您给出的情况下，我需要用于 Content3B/Content2，但不需要 Content3A/Content2
亲爱的詹姆斯，我对 Jinja2 不熟悉，但我知道首先你应该使用循环创建表，然后使用“if”为行跨度提供条件。