表格 HTML - 将 2 行转换为半高 1 标准行

Question

我正在尝试复制中间的列和行，其高度为标准行高的 50%，如下图所示：

我正在尝试嵌套它们并调整，但它没有按预期工作，它们没有像图片中那样响应，中间列有两行：上面 1 行 100% 宽，下面两列，它们都并排跨越侧，并且尝试调整宽度也不起作用（两行将共享主行各 50% 的完整高度）。

有人可以帮忙解决这部分问题吗？

<tr>
    <td>I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS...</td>
        <td>
           <p>Belopp (får inte ändras)</p>
        <td>
           <p>Svenska kronor</p>
        </td>
        <td>
           <p>öre</p>
        </td>
    </td>
    <td colspan="3">I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS..</td>
</tr>

我试图嵌套它们并使用 css 设置宽度，但它不起作用。

Answer 1

有多种方法可以实现这一点..无论如何，一种方法是将中间的列建模为新表，因为您无法嵌套

td

元素。

table td {
  border: solid 1px;
}

<table>
  <tr>
    <td>I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS...</td>
    <td>
      <table>
        <tr>
          <td colspan="2" style="text-align: center;">Belopp (får inte ändras)</td>
        </tr>
        <tr>
          <td>Svenska kronor</td>
          <td>öre</td>
        </tr>
      </table>
    </td>  
    <td>I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS..</td>
  </tr>
</table>