html - 对具有多个行跨度的表格中的单元格进行排序

Question

我需要创建一个使用行跨度分割空间的表，以使用 BForeports 将其呈现为 PDF。这是我想要创建的示例（数字仅供布局参考）：

但是我得到的结果是这样的：

如果图像中不清楚，则第二组两个较小的单元被推下并出现在较低的大单元之前。我 99% 确定这是因为单元格 3 和 4 出现在 dom 中的较早，但我不知道如何修复它。

这是我的表的代码：

<table class="total" style="width: 100%;" border="1px">
  <tr>
    <td rowspan="6" colspan="1"></td>
    <td rowspan="3" colspan="6">1</td>
    <td rowspan="2" colspan="2"></td>
    <td rowspan="2" colspan="2"></td>
  </tr>
  <tr>

  </tr>
  <tr>
    <td rowspan="2" colspan="2">3</td>
    <td rowspan="2" align="right" colspan="2">4</td>
  </tr>
  <tr>
    <td rowspan="3" align="left" colspan="6">2</td>
  </tr>
  <tr>
    <td rowspan="2" align="right" colspan="2"></td>
    <td rowspan="2" align="right" colspan="2"></td>
  </tr>
  <tr>

  </tr>
</table>

标签： htmlhtml-tablebfo

Answer 1

尝试这个

table {
    border-spacing: 0;
    border-collapse: collapse;
    width:100%;
}
table td {
    border: 1px solid blue;
    padding: 5px;
    text-align:center;
}

<table>
  <tr>
    <td rowspan="6">A</td>
    <td rowspan="3">B</td>
    <td rowspan="2">1</td>
    <td rowspan="2">4</td>    
  </tr>
  <tr></tr>
  <tr>
    <td rowspan="2">2</td>
    <td rowspan="2">5</td>
  </tr>
  <tr>
    <td rowspan="3">C</td>
  </tr>
  <tr>
    <td rowspan="2">3</td>
    <td rowspan="2">6</td>
  </tr>
</table>