html - 用不同的填充在html中嵌套表格

Question

我正在尝试创建下表：

---

我似乎无法将内表嵌套在外表中。table 是正确使用的工具，还是有其他工具可以让我做这种事情？我读过我可以使用样式，然后根据像素手动定位它，但这似乎不是一个好的解决方案..

这是我所拥有的（注意：内表是问题）

            <table>
                <tbody>
                    <tr>
                        <td>field_A </td>
                        <td><input type="text"></td>
                    </tr>

                    <tr>
                        <td> 
                            [optional]
                            <input type="text"> 
                        </td>

                        <td>
                            [optional]
                            <input type="text">
                        </td>
                    </tr>

                    <tr>
                        <td>field_D </td>
                        <td><input type="text"></td>
                    </tr>
                </tbody>
            </table>

标签： htmlcss

Answer 1

您的问题中只有一张桌子。我想你想要这样的东西：

<table>
  <tbody>
    <tr>
      <td>field_A </td>
      <td><input type="text"></td>
    </tr>
    <table style="position: relative; left: 25px;">
      <tr>
        <td>
          [optional]
          <input type="text">
        </td>

        <td>
          [optional]
          <input type="text">
        </td>
        <tr>
          <td>
            [optional]
            <input type="text">
          </td>

          <td>
            [optional]
            <input type="text">
          </td>
        </tr>
    </table>

    <tr>
      <td>field_D </td>
      <td><input type="text"></td>
    </tr>
  </tbody>
</table>

这将表格嵌套在另一个表格中，并缩进它（基于提供的图片。）