DEV Community


Dynamic generated nested table

nickknoops_37 profile image Nick Knoops ・2 min read

I'm stuck on this issue for a while now, and i can't figure out how to solve this. I have a feeling i'm rather close to solving this. But the final piece of the puzzle is missing.

What i'm trying to do? I use the MPDF library to render an PDF based on a XML source file. I want to make use of the nested table functionality. And creating the table with static html and rendering it works like a charm. However, generating the same structure based on the data itself is giving me a headache. The DOM structure should be:

With the following code:

echo '<table><tbody>';
  foreach($orderConfArray as $orderConfLine ) :
    $orderConfEconData = isset($orderConfLine['EconData']) ? $orderConfLine['EconData'] : '';
    foreach($orderConfEconData as $key => $value) :

        if($x === 1 ) :

            echo '
            <td>blank col</td>
            <td colspan="6">
            <table cellspacing="2" class="inner" width="100%">

        echo '<tr>';
                echo '<td>';
                echo 'content';
                echo '</td>';
        echo '</tr>';

        if($x === 16 ) :
            echo '
        $x = 0;
        $y = 0;
 echo '</tbody></table>';
Enter fullscreen mode Exit fullscreen mode

I get the following output, which is close. But not yet what i'm trying to accomplish. I need to do the following (I think) to get this working:

Count the total number of items
If the count reaches a certain number (on the nested table's TD), it should create a new TR within the nested table and continue from there.
If we reach a certain number of TR's within the nested table. It should create a new TR with a nested table altogether.
I can't wrap my head around this. Does anyone have a clue on how to fix this?


Editor guide
eruizdechavez profile image
Erick Ruiz de Chavez

I do not think this will solve your problem, but might at least give you a different perspective on how to build those tables.

    table {
        border: 1px solid black;
        width: 100%;

    td {
        border: 1px dotted lightgray;

$items = array(
    'lorem', 'ipsum', 'dolor', 'sit', 'amet',
    'consectetur', 'adipiscing', 'elit', 'curabitur', 'tristique',
    'enim', 'in', 'condimentum', 'posuere', 'odio',
    'sem', 'viverra', 'a', 'feugiat', 'purus',
    'quam', 'vitae', 'urna', 'morbi', 'lacinia',
    'volutpat', 'mi', 'id', 'nulla', 'consequat',
    'ut', 'vestibulum', 'scelerisque', 'dui', 'molestie',
    'tempor', 'nibh', 'erat', 'laoreet', 'ex',
    'venenatis', 'nisl', 'massa', 'ac', 'pellentesque',
    'elementum', 'ligula', 'rhoncus', 'eleifend', 'metus',
    'mauris', 'nunc', 'eu', 'risus', 'sodales', 'quisque',
    'varius', 'at', 'duis', 'sapien', 'commodo', 'sed',
    'nisi', 'justo', 'porta', 'luctus', 'vulputate', 'velit', 'cras' );

$maxCellsPerRow = 7;
$maxRowsPerTable = 3;

$index = 0;
$length = count($items);

for (; $index < $length; $index++) {
    if ($index % ($maxCellsPerRow * $maxRowsPerTable) === 0) {

    if ($index % $maxCellsPerRow === 0) {


    if ($index % $maxCellsPerRow === $maxCellsPerRow - 1 || $index === $length - 1) {

    if ($index % ($maxCellsPerRow * $maxRowsPerTable) === $maxCellsPerRow * $maxRowsPerTable - 1 || $index === $length - 1) {

function openTable()
    echo '<table><tbody>';

function openRow()
    echo '<tr>';

function printCell($item)
    echo '<td>', $item, '</td>';

function closeRow()
    echo '</tr>';

function closeTable()
    echo '</tbody></table>';
Enter fullscreen mode Exit fullscreen mode
nickknoops_37 profile image
Nick Knoops Author

Ah.. Thanks dude! Will look into your solution. I was trying something along the lines of adding extra counters on the parts where i open/close rows and tables. But this will do aswell