如何实现HTML表格中两行各占标准行高50%的布局？

先修正你代码里的标签嵌套错误（td不能直接嵌套td），通过嵌套表格结合CSS即可实现目标布局：

完整代码示例 #

<style>
  /* 外层表格基础样式 */
  .outer-table {
    width: 100%;
    border-collapse: collapse;
  }
  .outer-table td {
    border: 1px solid #ccc; /* 用于直观查看布局，可按需删除 */
  }
  /* 中间嵌套表格核心样式 */
  .inner-table {
    width: 100%;
    height: 100%; /* 占满外层单元格高度 */
    border-collapse: collapse;
  }
  .inner-table tr {
    height: 50%; /* 每行占嵌套表格总高度的50% */
  }
  .inner-table td {
    border: 1px solid #666; /* 用于直观查看布局，可按需删除 */
  }
</style>

<table class="outer-table">
  <tr>
    <td>I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS...</td>
    <!-- 中间列：嵌套表格实现上下分区 -->
    <td>
      <table class="inner-table">
        <!-- 上方100%宽度行 -->
        <tr>
          <td colspan="2">Belopp (får inte ändras)</td>
        </tr>
        <!-- 下方两列并行行 -->
        <tr>
          <td>Svenska kronor</td>
          <td>öre</td>
        </tr>
      </table>
    </td>
    <td colspan="3">I FALTET NEDAN FÅR ANTECKNINGAR INTE GÖRAS..</td>
  </tr>
</table>

关键逻辑说明 #

• 外层表格负责整体三列布局（左列、中间列、右跨三列）
• 中间列嵌套一个100%宽高的表格，通过给嵌套表格的<tr>设置height: 50%，强制两行各占中间列高度的一半
• border-collapse: collapse用于消除表格边框间隙，可根据实际样式需求调整
• 示例中的边框样式仅用于直观展示布局结构，实际使用时可删除

内容的提问来源于stack exchange，提问作者Vanessa Arruda