Упорядочивание ячеек в таблице с несколькими рядами строк - PullRequest
Новая
       5

Упорядочивание ячеек в таблице с несколькими рядами строк

0 голосов
/ 09 ноября 2018

Мне нужно создать таблицу с разделенным пространством, используя интервалы строк, для визуализации в виде PDF с использованием BFOreports. Вот пример того, что я хотел бы создать (номера только для справки):

enter image description here

Однако результат, который я получаю, таков:

enter image description here

Если на изображениях неясно, второй набор из двух меньших ячеек выталкивается вниз и появляется перед нижней большой ячейкой. Я на 99% уверен, что это потому, что ячейки 3 и 4 появляются раньше, но я не уверен, как это исправить.

Вот код для моей таблицы: 

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

1 Ответ

0 голосов
/ 09 ноября 2018

попробуйте 

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