HTML 表一个内另一个

Question

我有这张 table 和里面的另一张 table 。我无法让右边的 table 不占用左边的空间。

示例:截断的“hello world 2”正在占用空间并将“hello world 3”向下推。我希望它保持在“hello world 1”的正下方，并且在它的右侧仍然有表“hello world 2”。我怎样才能做到这一点 ？

<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>

看到这张照片我希望这样的事情发生:

在此图像中，方框代表 Hello world 2，旁边的线条代表 hello world 3

这是我在使用 rowspan 时得到的结果:

Answer 1

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

• rowspan is used when you need to merge rows to merge it into a single column. In this case, the right "hello world 2" cell has been formed by merging both the first tr row and second tr row using rowspan="2"

<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>

注释- 对先前提交的修改。您可以根据左侧和右侧所需的行数对其进行修改。