Incorrect format when generating a table in pdf with jsPDF

I have this table in html

<table id="test" class="table table-striped table-custom table-responsive">
            <thead class="ordenable">
                <tr>
                    <th class="col-xs-1 col-sm-2 col-md-2" id="TRPANUM" onclick="ordenar(this.id)"><?php echo $lang["ORDEN"]?></th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="PARCOD" onclick="ordenar(this.id)"><?php echo $lang["CODIGO"]?></th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="PARDESE" onclick="ordenar(this.id)"><?php echo $lang["PARADA_CAS"]?></th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="PARCLLN" onclick="ordenar(this.id)"><?php echo $lang["CODIGO_CALLE"]?></th>
                    <th class="col-xs-4 col-sm-3 col-md-4" id="TRPANPAS" onclick="ordenar(this.id)"><?php echo $lang["NUMERO_PASAJEROS"]?></th>
                    <th class="col-sm-4 col-6"></th>
                </tr>
            </thead>
            <tbody>
            <?php
                foreach ($resultado as $key) {
                    ?>
                    <tr>
                        <td><?php echo $key["TRPANUM"] ?></td>
                        <td><?php echo $key["PARCOD"] ?></td>
                        <td><?php echo $key["PARDESE"] ?></td>
                        <td><?php echo $key["PARCLLN"] ?></td>
                        <td><?php echo $key["TRPANPAS"] ?></td>                        
                    </tr>
                    <?php
                }
            ?>
            </tbody>
        </table>

I collect the data from the database and add it to the table. After this I execute the following script.

function myFunction() {
                var pdf = new jsPDF('p', 'pt', 'letter');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#test')[0];

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 10,
        width: 700
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF 
        //          this allow the insertion of new lines after html
        pdf.save('Test.pdf');
    }, margins);
    }

This generates me the pdf without errors but instead of drawing a table, I draw each data separated by intros. Print it this way.

Column 1

Column 2

Column 3

Column 4

Column 5

Data 1

Data 2

Data 3

Data 4

Data 5

I have tried two more methods that correctly generate the html but they are not created with the correct format anyway.

var specialElementHandlers = {
    '#test': function (element, renderer) {
        return true;
    }
};  
function myFunction() {
            doc.fromHTML($('#test').get(0), 10, 10, {
                'width': 500,
                'elementHandlers': specialElementHandlers
            });
            doc.save('Report.pdf');
}

In this case the data is displayed in the same way as in the first method.

The third and last method I've tried is the same as the second one but changing $(#test).get(0)´ por ´$(#test).html .

var specialElementHandlers = {
    '#test': function (element, renderer) {
        return true;
    }
};  
function myFunction() {
            doc.fromHTML($('#test').html, 10, 10, {
                'width': 500,
                'elementHandlers': specialElementHandlers
            });
            doc.save('Report.pdf');
}

This last one prints me the data without any intro, all in the same line. Print it this way:

Column 1 Column 2 Column 3 Column 4 Column 5 Data 1 Data 2 Data 3 Data 4 Data 5.

I would like to know how to print the data in a table format.