Ordering cells in table with multiple rowspans

Question

I need to create a table with the space split up using rowspans to be rendered as a PDF using BFOreports. Here is an example of what I would like to create (Numbers for purposes of layout reference only):

However the result I am getting is this:

If it is not clear in the images the Second set of two smaller cells is being pushed down and appearing ahead of the lower large cell. I am 99% sure this is because cells 3 and 4 appear earlier in the dom, but I'm not sure how to fix it.

Here is the code for my table:

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

Did you allready try to switch out `` with 3 and 4 and `` with 2? — Matt.S, Nov 09 '18 at 11:25
I'm not quite sure I follow, do you have an example of what you mean? — AntlerFox, Nov 09 '18 at 11:27
I mean your 3rd and 4th ``. You allready said this might be because of your DOM. So did you try to change it? — Matt.S, Nov 09 '18 at 11:30
not sure about it, what browser are you using, can't reproduce the issue, tried it in a snippet its working as expected. — Nikhil Kinkar, Nov 09 '18 at 11:36
Not actually being rendered in browser, BFOreports is rendering this into a PDF, I didn't realise that could be making a difference to the rendering, I'll add it to the question — AntlerFox, Nov 09 '18 at 11:49

Udhay Titus · Answer 1 · 2018-11-22T10:10:24.940

try this

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>

Ordering cells in table with multiple rowspans

1 Answers1