HTML表一在另一个里面

Question

我有这张桌子和里面的另一张桌子。我无法在右侧拿到桌子，不占用左边的空间。

示例：剪下来的＃hello world 2＆＃34;占据了空间并推动了'＃3; hello world 3＆＃34;下。我想让它保持在＆＃34; hello world 1＆＃34;并且还有桌子＆＃34;你好世界2＆＃34;在它的右侧。我怎样才能做到这一点 ？

＆＃13;

＆＃13;

<table style="b">
  <tr>
    <td>
      Hello world 1
    </td>
    <td>
      <table style="border:1px solid;width:300px; height:300px;float:right;text-align:center ">
        <tr>
          <td>Hello world 2</td>
        </tr>
      </table>
    </td>

  </tr>
  <tr>
    <td>
      Hello world 3
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

看到这张照片我想要这样的事情发生：

在此图像中，框表示Hello world 2及其旁边的行hello world 3

以下是我使用rowspan时的结果：

Answer 1

你是指这个吗？根据您的需要，使用rowspan或colspan合并行或列，如下所示。

•   

  当您需要合并行以将其合并为单个行时，将使用rowspan   柱。在这种情况下，正确的＆＃34;你好世界2＆＃34;细胞已经形成   通过使用rowspan =＆＃34; 2＆＃34;

  合并第一个tr行和第二个tr行

＆＃13;

＆＃13;

<table style="b">
  <tr>
    <td>
      <table>
        <tr>
          <td>
            Hello world 1
          </td>
        </tr>
        <tr>
          <td>
            Hello world 2
          </td>
        </tr>
        <tr>
          <td>
            Hello world 4
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
        <tr>
          <td>
            Hello world 5
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table style="border:1px solid;width:300px; height:300px;float:right;text-align:center ">
        <tr>
          <td>Hello world 3</td>
        </tr>
      </table>
    </td>
</table>

＆＃13;

＆＃13;

＆＃13;

备注 - 对上一个子目录所做的修改。您可以根据左侧和右侧所需的行数进行修改。

Answer 2

我认为你正在努力实现以下目标？

当您使当前列跨越行时，您需要使用rowspan。

对于您希望td跨越每行更新rowspan属性。

table,
table tr > * {
  vertical-align: top;
  table-layout: fixed;
  padding: 1rem;
}

td table {
  border: 1px solid;
  width: 300px;
  height: 300px;
  text-align: center
}

<table>
  <tr>
    <th>Row title</th>
    <td>
      Hello world 1
    </td>
    <td rowspan="5">
      <table>
        <tr>
        <th>Row title</th>
          <td>Hello world 2</td>
        </tr>
        <tr>
        <th>Row title</th>
          <td>Hello world 2</td>
        </tr>
        <tr>
        <th>&nbsp;</th>
          <td>Hello world 2</td>
        </tr>
      </table>
    </td>

  </tr>
  <tr>
    <th>Row title</th>
    <td>
      Hello world 3
    </td>
  </tr>
  <tr>
    <th>Row title</th>
    <td>
      Hello world 4
    </td>
  </tr>
  <tr>
    <th>Row title</th>
    <td>
      Hello world 3
    </td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>
      Hello world 5
    </td>
  </tr>
</table>