将 html 行拆分为多个（子）行答案

【问题标题】：Split an html row into multiple (sub) rows将 html 行拆分为多个（子）行
【发布时间】：2014-12-29 04:03:34
【问题描述】：

如何将 html 表格中的一行拆分为多个（子）行？（我的意思不是使用rowspan 来跨越多行，因为我使用的是一个名为sync 的rails gem，它被限制为一次更新一个表行）。

例如，如何在表中创建单行，即：

在第一列，只有一行
在第二列中，分为 2 个子行
在第三列中，分为 4 个子行（上一列的第一行分为 2 个子行，上一列的第 2 行分为 2 个子行）。

这只是一个例子。我需要能够动态决定在运行时拆分行的方式。

编辑：请参阅下面的结构，如上面的要点中所述（尽管请注意，我试图在单个表格行中实现此结构，即不使用 rowspan）

<table>
    <tr>
        <td rowspan=4>1</td>
        <td rowspan=2>2</td>
        <td >3</td>
    </tr>

    <tr>
        <td >4</td>
    </tr>

    <tr>
        <td rowspan=2>2</td>
        <td >5</td>
    </tr>

     <tr>
        <td >6</td>    
     </tr>

http://jsfiddle.net/40ukzvz1/

【问题讨论】：

向我们提供您可以使用的 HTML 代码，并说明哪些内容不适合您。
我没有示例 html 代码，因为我不知道如何制作问题中描述的“子”行结构。我正在寻找有关如何执行此操作的指导或示例代码。
所以请向我们展示您在没有 'subs` 的情况下的结构，以及在 jsfiddle.net 上使用 'subs' 时应该如何看待它。基本上我们不会做你的工作，我们会回答你的问题。跨度>

标签： html html-table row

【解决方案1】：

您可以尝试嵌套表格，以便每个表格结构不受其所在单元格的影响。

查看代码示例：

<table width="100%" border bgcolor="red">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>
      <table width="100%" border bgcolor="green">
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
      </table>
    </td>
    <td>
      <table width="100%" border bgcolor="blue">
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
      </table>
    </td>
    <td>
      <table width="100%" border bgcolor="yellow">
        <tr>
          <td>1</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

【讨论】：